我正在寻找一个完整的有效选择器列表,我可以通过@ViewChild和来访问子组件/ DOM元素@ContentChild.
说我有一个孩子HelloComponent:
我知道我可以#ref为它添加模板和查询,如下所示:
<hello #myHello></hello>
@ViewChild('myHello') myHello: HelloComponent;
或者我可以直接查找该组件(没有模板#ref):
@ViewChild(HelloComponent) myHello: HelloComponent;
在本期中,提到可以使用以下选择器:
我们目前支持CSS选择器的一个子集:
*元素选择器
*属性选择器(包括值)
*:not(...)伪选择器
*上面的组合(包括,)
但是当我在Stackblitz中测试这些以验证时(这是它的链接),我实际上无法让前三个中的任何一个工作.(检查控制台以查看undefined我无法工作的选择器类型.我不确定这些选择器是否出错或者实际列表是否不同.)
那么,哪些选择器会起作用？此外,在名单同样为@ViewChild,@ContentChild,@ViewChildren,和@ContentChildren？
我正在尝试在Angular2中构建一个列表组件,它获取组件用户的项目字段的项目,列和模板.所以我试图使用ngTemplateOutlet和ngOutletContext(我读过的是实验性的).但我无法让它发挥作用.
这是一个简化的组件,用于演示我要做的事情:
<div *ngFor="let item of items>
<span *ngFor="let column of columns>
<template [ngOutletContext]="{ item: item }"
[ngTemplateOutlet]="column.templateRef"></template>
</span>
</div>
以下是组件的用法:
<my-component [items]="cars" [columns]="carColumns">
<template #model>{{item.model}}</template>
<template #color>{{item.color}}</template>
<template #gearbox>{{item.gearbox}}</template>
</my-component>
以下是示例数据:
cars = [
{ model: "volvo", color: "blue", gearbox: "manual" },
{ model: "volvo", color: "yellow", gearbox: "manual" },
{ model: "ford", color: "blue", gearbox: "automatic" },
{ model: "mercedes", color: "silver", gearbox: "automatic" }
];
carColumns = [
{ templateRef: "model" },
{ …我无法获得我的自定义元素的 nativeElement 的引用。我有一个这样的模板：
<div #testone>
<my-feature-cmp><my-feature-cmp>
<my-feature-cmp><my-feature-cmp>
<my-feature-cmp><my-feature-cmp>
<div>
用于访问的代码：@ViewChild('testone') el: ElementRef;
当我这样做时，我得到了元素引用 -> console.log(this.el.nativeElement)
第二种模板
<my-feature-cmp></my-feature-cmp>
<my-feature-cmp></my-feature-cmp>
<my-feature-cmp></my-feature-cmp>
用于访问的代码：
@ViewChildren(MyFeatureCmp) el: MyFeatureCmp;
执行此操作时出现本机元素错误 ->
console.log(this.el.nativeElement)
当我这样做时，我得到了类引用并且没有 nativeElement ->
console.log(this.el)
console.log(this.el.toArray())
问题是如果我想更改标签属性，如何访问自定义组件的本机元素。其次，无论我以何种方式访问它们，如果我手动更改自定义组件的属性，它是否也会在更改后被检测为更改？
我试图通过使用 Angular 2 的传统“#”字符引用它们来在视图中动态选择模板。在我的项目中，我处理错误并将它们显示给用户，我有一个对话框组件，它的内容应该基于动态 html注入，这就是为什么我使用模板。
我阅读了一些文章，这些文章展示了一种方法，当我已经知道模板引用的名称时，我不知道引用的名称，我在运行时得到了名称。我特别遵循了本指南：https : //www.bennadel.com/blog/3101-experimenting-with-dynamic-template-rendering-in-angular-2-rc-1.htm
所以目前我的对话框组件具有以下视图：
<template #err_1 let-property1="p1" let-property2="p2">
property1: {{p1}}
property2: {{p2}}
</template>
<template #err_2 let-property1="p1" let-property2="p2">
<p *ngIf="p1">{{p1}}</p>
property2: {{p2}}
</template>
<!--The code for the template directive i took from the guide in the link above-->
<tem [render]="templateRef"
[context]="context">
</tem>
在我的 dialog.ts 我有以下代码：
@Component({
selector: 'error-dialog',
queries: {
templateRef: new ViewChild("err_1")
},
templateUrl: './dialog.html'
})
...
“TemplateRendererDirective”指令源是我从上面链接中的指南中获取的。注意是什么让我感到困惑：templateRef 基本上得到一个对象：“ViewChild”，即使指令最终得到 TemplateRef 实例，这怎么可能？
所以只有当我知道我想要呈现哪个错误模板时，例如：“err_1”我只是在 dialog.ts 中预先引用它，但事实并非如此，我想动态地告诉我想要呈现“err_1”、“err_2”等.. 并给出上下文（这是用数据填充该模板的对象 - 例如 p1、p2，也是动态的）
有可能做到吗？
我有instructorControl = new FormControl();一个自动完成输入.autocompelte订阅this.instructorControl.valueChanges.当选择自动完成的建议或单击添加按钮时,当前输入值将被推送到数组并且输入将被清除this.instructorControl.patchValue('');.
选择自动填充选项后,不会再次打开自动填充选项菜单.为此,您必须输入内容或重新聚焦输入.
如果选择了建议,如何重新打开自动完成功能？
看到这个stackblitz.(9月18日更新)
<button md-button (click)="addInstructor()">add</button>
<md-input-container fxFlex>
<input mdInput name="instructor" placeholder="instructor" (keydown.enter)="addInstructor()" [mdAutocomplete]="instructorsAuto" [formControl]="instructorControl">
</md-input-container>
<md-autocomplete #instructorsAuto="mdAutocomplete">
<md-option *ngFor="let instructor of filteredInstructors | async" [value]="instructor" (click)="addInstructor()">
{{ instructor }}
</md-option>
</md-autocomplete>
{{instructors | json}}
instructors: string[] = [];
instructorControl = new FormControl();
filteredInstructors: Observable<string[]>;
allInstructors = ['Max', 'Tirrell'];;
instructorsAuto;
ngOnInit() {
this.filteredInstructors = this.instructorControl.valueChanges
.startWith('')
.map(value => this.filterInstructors(value));
}
addInstructor() {
const instructor: …我正在尝试访问 的ViewChildren本机元素 => ，但这样做时HTMLElements我不断收到响应。undefined看一看：
列表.html
..
<app-element #someElement *ngFor="let element of elements" [someinput]="someinput"></app-element>
..
列表.ts
@ViewChildren("someElement") someElements:QueryList<ElementRef>;
@HostListener("window:resize", ["$event"])
resize(event){
console.log(event);
console.log((this.someElements.first)); //returns ElementComponent as expected
console.log((this.someElements.first.nativeElement)); // nativeElement appears to be undefined
}
我用过ViewChildren很多次了。然而，这一次并没有按预期工作。是因为ViewChild是角度分量吗？我错过了一些明显的东西吗？
我花了更多时间试图理解以下博客文章在 Angular 中使用 NgTemplateOutlet 创建可重用组件
上面帖子的工作代码可以在stackblitz找到。
在UsageExample组件的卡或列表视图组件调用。提供了我非常理解的项目和模式输入参数。
现在我不明白的是如何
<ng-container *cardItem="let item">
<h1>{{item.header}}</h1>
<p>{{item.content}}</p>
</ng-container>
<span *listItem="let item">
<h1>{{item.header}}</h1>
<p>{{item.content}}</p>
</span>
在UsageExample模板中替换
<ng-container *ngSwitchCase="'card'">
<div *ngFor="let item of items" style="margin: 5px;border: black 1px solid">
<ng-container *ngTemplateOutlet="cardItemTemplate; context: {$implicit: item}">
</ng-container>
</div>
</ng-container>
<ul *ngSwitchCase="'list'">
<li *ngFor="let item of items">
<ng-container *ngTemplateOutlet="listItemTemplate; context: {$implicit: item}"></ng-container>
</li>
</ul>
在CardOrListViewComponent组件模板中。在CardOrListViewComponent组件中，声明了两个指令
@ContentChild(CardItemDirective, {read: TemplateRef}) cardItemTemplate;
@ContentChild(ListItemDirective, {read: TemplateRef}) …在Angular 4+中,我遵循模板驱动的形式:
<form #addForm="ngForm" (ngSubmit)="onFormSubmit($event, addForm)" >
<div class="form-group">
<label for="item_name">Item Name</label>
<input id="item_name" name="item_name" [(ngModel)]="itemName"
#item_name="ngModel" autofocus class="form-control"
required minlength="4" maxlength="20"
aria-describedby="itemNameHelpBlock">
<small *ngIf="(item_name.invalid && item_name.touched)" id="itemNameHelpBlock" class="form-text text-error" >
Value must be at least 4 characters and must not exceed 20 characters
</small>
</div>
<div class="form-group">
<label for="item_type">Item Type</label>
<input id="item_type" name="item_type" [(ngModel)]="itemType"
#item_type="ngModel" class="form-control" required minlength="2"
maxlength="20" aria-describedby="itemTypeHelpBlock">
<small *ngIf="(item_type.invalid && item_type.touched)" id="itemTypeHelpBlock" class="form-text text-error" >
Value must be at least 2 characters and must not exceed …我目前正在开发一个项目，我需要根据组件传递一些 @input 值。因此，该指令将相应地发挥作用。但问题是我无法获得该指令的参考。相反，我只得到了 elementRef 作为回报。请参阅下面的 stackblitz 示例以获取更多参考。