主页 / 问题 / 869985
Accepted
Данис Хамидуллин
Asked:2020-08-17 22:00:26 +0000 UTC2020-08-17 22:00:26 +0000 UTC

Angular，无需重新加载即可更新组件

  • 772

一页上有几个routerLink，导致notes/:id：

routerLink="notes/1"
routerLink="notes/2"
routerLink="notes/3"
...

在同一个父组件中，该组件被<router-outlet></router-outlet>加载NoteView，它id查找并显示信息。在地址栏中的链接之间切换时id，组件会更改但不会重新加载，会与第一个id打开的链接挂起。每次单击不同的链接时，如何强制组件更新？Event在每次点击链接的时候，EventListner会不会太麻烦的解决方案，会有几个这样的组件。

路线是这样的：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'app',
    component: TodoAppParentComponent,
    children: [{
      path: 'notes',
      children: [{
        path: ':id', // id в ссылке меняется но компонент остается неизменным
        component: NoteViewComponent
      }]
    }]
  }
];

问题组件类

export class NoteViewComponent implements OnInit {

  id: string = null;
  note: object = null;

  constructor(
    private http: HttpService,
    private activatedRoute: ActivatedRoute
  ) { }

  ngOnInit() {
    this.id = this.activatedRoute.snapshot.params['id']; // не срабатывает при переходе по разным routerLink, как сделать чтоб срабатывал?
    this.note = {
      title: 'Пример заголовка, заметка',
      body: `lorem....`
    };
  }
}

HTML 组件模板

<p>
  id: {{id}}
</p>
<div *ngIf="note">
  <h3>{{note.title}}</h3>
  <hr>
  <div class="body" innerHTML="{{note.body}}"></div>
</div>

屏幕 在 URL id=2 中，但组件剩下 1

angular5

1 个回答

  1. Best Answer

    这是路由器在同一组件之间切换时的标准行为，称为reuse. 路由器仅将组件实例化一次，并且不会ngOnDestroy在每次从/notes/1to转换时调用构造函数/notes/2。最快的解决方案是订阅更改参数：

    import { ActivatedRoute, Params } from '@angular/router';

import { Subject } from 'rxjs/Subject';
import { takeUntil } from 'rxjs/operators/takeUntil';

@Component({ ... })
export class NoteViewComponent implements OnDestroy {
    private destroy$ = new Subject<undefined>();

    public id: string = null;

    public note: object = null;

    constructor(private route: ActivatedRoute) {
        this.route.params.pipe(
            takeUntil(this.destroy$)
        ).subscribe((params: Params) => {
            this.id = params.id;
            this.note = {
                title: 'blah blah',
                body: 'lorem...'
            };
        });
    }

    public ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }
}
    • 2

相关问题