根据当前URL或其他组件刷新Angular 4组件

Question

​

​

目标

目标是单击左侧的顶级用户之一，并刷新右侧该用户的详细信息。这意味着两个组件之间必须有某种形式的通信。

最好的方法是什么，我最好的意思是最安全和最简单的。

重点不仅仅是刷新整个页面，而是单个详图构件。

你可以在github上找到整个项目。这篇文章的底部提供了一个链接。

用户-仪表板-组件

     @Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
providers: [UserDetailComponent]
})

export class DashboardComponent implements OnInit {

users: User[] = [];

constructor(private userService: UserService, private userDetailComponent: UserDetailComponent) {
}

ngOnInit() {
    this.getUsers();
}

getUsers(): void {
    this.userService.getUsers()
        .subscribe(users => this.users = users.slice(0, 5));
}

public refreshUserDetailComponent(): void {
    this.userDetailComponent.refresh();
}

}

用户-详图-构件

export class UserDetailComponent implements OnInit {

@Input() user: User;

constructor(private userService: UserService,
            private route: ActivatedRoute,
            private location: Location) {
}

ngOnInit() {
    this.getUser();
}

getUser(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.userService.getUser(id)
        .subscribe(
            user => this.user = user[0],
            error => console.error(error),
            () => console.log("getUser() loaded: ", this.user)
        );
}

public refresh() {
    this.getUser();
}
}

Git Repo for the entire project

Answer 1

您可以在两个不同组件之间进行交互的方法之一是借助主体或行为主体。使用它，user-detail组件中的数据将根据user-dashboard组件中的数据进行更改。

在下面的链接中查看它

https://blog.cloudboost.io/build-simple-shopping-cart-with-angular-4-observables-subject-subscription-part-2-2d3735cde5f

Answer 2

对于这类问题，您可以结合使用功能强大的RouterModule和UsersComponent中的嵌套<router-outlet>来处理UserDetailComponent。

每次用户单击顶级用户之一时，<router-outlet>中的模板都会更改。您的根组件UsersComponent保持不变。

在UserDetailComponent中，您可以使用ActivatedRoute服务来检索路由的参数。订阅params，从参数中获取userId并检索要显示的用户。

此方法的最大优势在于，您可以使用不同的RouteGuards轻松扩展路径的功能，例如，在路径更改之前通过Resolver检索用户，或者您的UserDetailComponent中有一个表单，并且您希望在用户离开路径CanDeactivate之前通知用户任何未保存的更改

我提供了一个小的stackblitz演示：https://stackblitz.com/edit/angular-kdywqe?file=app%2Fusers.component.ts

users.component.ts

​

@Component({
  selector: 'my-users',
  template: `
    <h1>Users</h1>
    <ul>
      <li *ngFor="let user of users$ | async">
        <a [routerLink]="[user.id]">{{user}}</a>
      </li>
    </ul>
    <hr>
    <router-outlet></router-outlet>
  `,
  styles: []
})
export class UsersComponent  {
  public users$: Observable<string[]>;

  constructor(private usersService: UsersService) {
  } 

  ngOnInit() {
    this.users$ = this.usersService.getUsers();
  }
}

​

user-detail.component.ts

​

@Component({
  selector: 'my-user-detail',
  template: `
    <h1>User Detail</h1>

    {{user | json}}
  `,
  styles: []
})
export class UserDetailComponent  {

  public user;

  constructor(private router: Router,
              private route: ActivatedRoute,
              private usersService: UsersService) {
  } 

  ngOnInit() {
    this.route.params.pipe(
      map(params => params.userId),
      switchMap(userId => this.usersService.getUserDetail(+userId))
    ).subscribe(
      user => this.user = user,
      err => console.error(err)
    );

  }
}

​

routing.module.ts

​

const appRoutes: Routes = [
  {
    path: 'users',
    component: UsersComponent,
    children: [
      {
        path: '',
        component: UserDetailComponent
      },
      {
        path: ':userId',
        component: UserDetailComponent
      }
    ]
  },
  { path: '**',   redirectTo: '/users', pathMatch: 'full' }
];

​