Angular2 - NgSwitch 中的模板引用

Posted

技术标签:

【中文标题】Angular2 - NgSwitch 中的模板引用【英文标题】:Angular2 - Template reference inside NgSwitch 【发布时间】:2016-12-05 02:32:08 【问题描述】:

我有一个 NgSwitch 模板。在 NgSwitch 中,我想获得对初始化模板的模板引用。像这样的:

    <div class="container" [ngSwitch]="model.type">
        <first-component #ref *ngSwitchCase="0"></first-component>
        <second-component #ref *ngSwitchCase="1"></second-component>
        <third-component #ref *ngSwitchCase="2"></third-component>
    </div>

单击组件中的按钮时,我想将已初始化的组件(第一个/第二个/第三个)调用到一个方法(该方法在所有这 3 个组件实现的接口上定义)。问题是 ViewChild 未定义。如果我将#ref 移动到容器 div,如下所示:

<div class="container" #ref [ngSwitch]="model.type">
    <first-component *ngSwitchCase="0"></first-component>
    <second-component *ngSwitchCase="1"></second-component>
    <third-component *ngSwitchCase="2"></third-component>
</div>

ViewChild(模板引用)已初始化,但随后我可以调用组件的方法。

如何同时使用 NgSwitch 指令和模板引用变量? 或者另一方面,我如何从其父组件调用已初始化的组件(在我将#ref 移动到容器 div 的情况下)。

【问题讨论】:

【参考方案1】:

您也可以使用forwardRef,而无需任何模板引用,如下所示:

@Component(
    ...
    selector: 'first-component',
    providers: [
        provide: BaseEnumeratedComponent,
        useExisting: forwardRef(() => FirstComponent)
    ]
)

并在父组件中使用 ngAfterViewInit() 访问使用 switch-case 的组件列表。或者如果你想访问某个使用provide: FirstComponent

【讨论】:

【参考方案2】:

模板引用变量不应与结构指令一起使用。这里解释一个原因:Thomas Hilzendegen's blog

我的解决方案是为使用 [ngSwitch] 的容器标记创建一个模板引用变量,然后使用它的 children 属性访问它的子项。例如

<div [ngSwitch]="..." [class.error] = "(elem.children.item(0).className.indexOf('someClass') !== -1" #elem> 
... 
</div>

【讨论】:

【参考方案3】:

如果您在ngSwitchCase 处使用模板引用变量,它可以工作,这样:

<div class="container" [ngSwitch]="model.type">
    <first-component #ref *ngSwitchCase="0"></first-component>
    <second-component #ref *ngSwitchCase="1"></second-component>
    <third-component #ref *ngSwitchCase="2"></third-component>
</div>

请注意,如果您有:

export class SomeComponent 

  @ViewChild('ref') ref;
...

那么ref 在构造函数被调用时还没有被设置。甚至在初始化时也没有。只有在视图初始化之后。

这样,使用以下组件:

export class AppComponent implements OnInit, AfterViewInit 
  model = type: 0;

  @ViewChild('ref') ref;

  constructor() 
    console.log('constructor:', this.ref);
  
  ngOnInit() 
    console.log('ngOnInit:', this.ref);
  
  ngAfterViewInit() 
    console.log('AfterViewInit:', this.ref);
  


输出是:

constructor: undefined
ngOnInit: undefined
AfterViewInit: FirstComponent ...

demo plunker here。

【讨论】:

感谢您的回答。我在我的模板中找到了我的问题。我使用 ngSwitchCase 绑定到枚举变量,如此处所述***.com/questions/35835984/… - 如果我将此模式与枚举一起使用,即使在视图初始化之后,视图子项也是未定义的。当我切换到 ng-switch 绑定到数字时 - 正如我在这里为了简化它的工作代码。您知道为什么枚举绑定会发生这种情况吗?

以上是关于Angular2 - NgSwitch 中的模板引用的主要内容,如果未能解决你的问题,请参考以下文章

angular2中的递归动态模板编译

从Angular2控制器中的模板访问局部变量

Angular2嵌套模板驱动表单

如何将不同的模板变量传递给angular2中的一个按钮?

NgSwitch - 行为出乎意料,`No provider for NgSwitch` - 出现异常

如何在 Angular 2 中有条件地添加动画