この動作は、beta16でのみ発生します。以前のリリースは期待どおり動作しています。TemplateRefを検索すると@Queryの動作が異なります
@Queryは子孫要素のテンプレート要素も見つけます。コンテンツ内のTemplate要素を探すコンポーネントを考えます。
export class Container {
constructor(@Query(TemplateRef) templates: QueryList<TemplateRef>) {
templates.changes.subscribe(_ => {
console.log(templates.length);
});
}
}
@Component({
selector: 'my-app',
template: `<container>
<template></template>
<child>
<template></template>
</child>
</container>`,
directives: [Container,Child]
http://plnkr.co/edit/sANW6mfss5EvPfWpXRde
私は "1" がコンソールにログインすることを期待しますが、 "2" が記録されます。子のテンプレートも見つかります。
しかし、テンプレート要素をいくつかのランダム成分、例えば、 otherchildは、期待される結果を生成します。
export class Container {
constructor(@Query(OtherChild) templates: QueryList<OtherChild>) {
templates.changes.subscribe(_ => {
console.log(templates.length);
});
}
}
@Component({
selector: 'my-app',
template: `<container>
<otherchild></otherchild>
<child>
<otherchild></otherchild>
</child>
</container>`,
directives: [Container,Child,OtherChild]
})
http://plnkr.co/edit/OzXjz8niAurzr6CZIoes
コンテナは一つだけotherchildを有しているように、 "1" が印刷されています。
混乱の原因となるテンプレート要素とは異なるものがあります。私はこれがバグか意図された動作かどうか疑問に思います。
ありがとうございます。はい、ベータ版では発生しません15テンプレート要素を探すときにのみ適用され、第2のplunkrのotherchildのような他のコンポーネントは期待通りに動作します。私はすでにこの問題を提出しています。 https://github.com/angular/angular/issues/8292 –