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);
});
Query
来TemplateRef
?
以下是文档中的一些代码:
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。我该怎么办?
答案 0 :(得分:0)
我不知道如何访问组件的模板引用,但如果你弄清楚了,那么你可以简单地将它设为子组件中的公共属性并从父组件访问它。
我采取的解决方法是简单地使用 <ng-template>
来存储子模板并将其呈现在 <ng-container>
中。我将对该 ng-template 的引用存储在子组件中作为公共属性,并且可以从父组件轻松访问。我不认为这是最干净的解决方案,但它满足您的问题。
您可以在此 stackblitz 中查看我的解决方案:https://stackblitz.com/edit/angular-ivy-kahwbz?file=src/app/app.component.ts