Question

我有一个网页的条件模板，该模板可以根据传入的ID使用不同的网格组件

网页设置如下

www.mywebpage.com/referenceGrid/85

或 www.mywebpage.com/referencePage/75

我正在通过params服务监听页面更改ID

 ngOnInit(): void {
     this.route.params.subscribe(
          (params: Params) => {
            this.pageid = params['id'];
            this.gridData = [];               
          }
        ); 
}

它们都共享相同的component.ts文件。让我们称之为 base.component.ts 。

    @Component({
      selector: 'app-griddata',
        template: `
          <div [ngSwitch]="isCertainId">
            <template [ngSwitchCase]="true"> ${require('./specialId.component.html')} </template>
            <template ngSwitchDefault> ${require('./default.component.html')} </template>
          </div>`
          ],
         })

我使用ViewChildren查找网格。他们都被称为#grid

public isCertainId: boolean = false;
@ViewChildren('grid')
  public childrenComponent: QueryList<GridComponent>;
  private grid: GridComponent;

直到ngAfterViewInit都找不到孩子，所以我在这里叫它

  public ngAfterViewInit(): void { 
     this.isCertainId = (this.pageid === '85' || this.pageid === '16');
           this.childrenComponent.changes.subscribe((comps: QueryList<GridComponent>) =>
    {
      this.grid = comps.first;
    }
    });   
}

这在初始屏幕加载时效果很好，但是，如果用户选择其他网页（pageid 85至pageid 75），则模板条件语句不会再次被点击，因为两个页面都使用相同的组件。

如何使[ngSwitch]在其他页面加载时被点击？

Angular 2条件模板？

0 个答案: