如何从组件外部访问TemplateRef

时间:2018-10-09 18:33:32

标签: dart angular-dart dart-html

From the doc,我可以阅读:

  

或者,您可以通过查询从组件或指令中查询TemplateRef。

问题:

如何从外部$("#firstname").change(function() { var firstName = $(this).val(); var lastName = $("#lastname").val(); var fullName = firstName; if(lastName !== "") fullName = firstName + " " + lastName; $("#fullname").val(fullName); }); $("#lastName").change(function() { var firstName = $("#firstname").val(); var lastName = $(this).val(); var fullName = lastName; if(firstName !== "") fullName = firstName + " " + lastName; $("#fullname").val(fullName); }); QueryTemplateRef

以下是文档中的一些代码:

Component

如何从@Component( selector: 'child-cmp', template: '<p>child</p>', ) class ChildCmp { void doSomething() {} } @Component( selector: 'some-cmp', template: ''' <child-cmp #child1></child-cmp> <child-cmp #child2></child-cmp> <child-cmp #child3></child-cmp> ''', directives: [ChildCmp], ) class SomeCmp implements AfterViewInit { @ViewChildren('child1, child2, child3') List<ChildCmp> children; @override void ngAfterViewInit() { // Initial children are set for (var child in children) { child.doSomething(); } } } 获取SomeCmp的TemplateRef。我该怎么办?

1 个答案:

答案 0 :(得分:0)

我不知道如何访问组件的模板引用,但如果你弄清楚了,那么你可以简单地将它设为子组件中的公共属性并从父组件访问它。

我采取的解决方法是简单地使用 <ng-template> 来存储子模板并将其呈现在 <ng-container> 中。我将对该 ng-template 的引用存储在子组件中作为公共属性,并且可以从父组件轻松访问。我不认为这是最干净的解决方案,但它满足您的问题。

您可以在此 stackblitz 中查看我的解决方案:https://stackblitz.com/edit/angular-ivy-kahwbz?file=src/app/app.component.ts