Javascript Angular 2 使用绑定将 html 传递给 ng-content
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42878506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 passing html to ng-content with bindings
提问by userqwert
I'm writing angular components for the foundation css framework. I am working on the tabs component, and want to be able to pass some HTML to the <ng-content>of this.
我正在为基础 css 框架编写角度组件。我正在处理选项卡组件，并希望能够将一些 HTML 传递给<ng-content>这个组件。
The problem is, I also need to pass html which a user can put bindings on, like this:
问题是，我还需要传递用户可以绑定的 html，如下所示：
PARENT TEMPLATE
父模板
<tabs [data]='example'>
<div> Age <br> {{item.age}} </div>`
</tabs>
TABS COMPONENT
标签组件
<ul class="tabs" #tabs>
<li *ngFor="let item of data | async" (click)="tabClick($event)">
<a>{{item.name}}</a>
</li>
</ul>
<div>
<ng-content></ng-content>
</div>
TABS TYPESCRIPT
标签打字稿
@Component({
selector: 'tabs',
templateUrl: './tabs.component.html'
})
export class TabsComponent {
@Input('data') data:any;
@ViewChild('tabs') tabs: ElementRef;
}
Where itemis a reference to an object in the examplearray.
哪里item是对example数组中对象的引用。
However, I get this error:
Cannot read property 'name' of undefinedas itemis being evaluated before it is inserted into the <ng-content>directive.
但是，我收到此错误：
Cannot read property 'name' of undefinedasitem在将其插入<ng-content>指令之前正在评估。
Is there a way to get around this limitation, or am I going about this the wrong way?
有没有办法绕过这个限制，或者我是否以错误的方式解决这个问题？
回答by Günter Z?chbauer
update Angular 5
更新角度 5
ngOutletContextwas renamed to ngTemplateOutletContext
ngOutletContext被重命名为 ngTemplateOutletContext
See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
原来的
ngTemplateOutletor ngForTemplatecan be used for that use case:
ngTemplateOutlet或ngForTemplate可用于该用例：
<tabs [data]='example'>
<ng-template let-item>
<div> Age <br> {{item.age}} </div>`
</ng-template>
</tabs>
@Component({
...
template: `
<ul class="tabs" #tabs>
<li *ngFor="let item of data | async" (click)="tabClick($event)">
<a>{{item.name}}</a>
</li>
</ul>
<div>
<ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: (data | async)}"></ng-template>
</div>
`
})
class TabsComponent {
@ContentChild(TemplateRef) templateRef:TemplateRef;
}
See also Angular 2 bind transcluded content to loop variable
回答by Aravind
You should be using this way instead,
你应该改用这种方式，
<tabs [data]='example'>
<div> Age <br> {{item.age}} </div>`
</tabs>
Component typescript
组件打字稿
@Component({
selector: 'tabs',
templateUrl: './tabs.component.html'
})
export class TabsComponent {
@Input() data:any;
item:any{};
}
In your content projection define a selector as
在您的内容投影中，将选择器定义为
<div class="tabs-body">
<ng-content select=".tabs-body"> </ng-content>
</div>
As your passing with bindings
当你带着绑定传递
<tabs [data]='example'>
<div> Age <br> {{item.age}} </div>`
</tabs>
回答by Ben Gummelt
You need to pass the item object to the ng-content component.
您需要将 item 对象传递给 ng-content 组件。
<ng-content [item]="selectedTab></ng-content>
I am not certain on what lies behind the tab click event but you can assign that item object to selectedTab which will be passed to the component.
我不确定选项卡单击事件背后的内容，但您可以将该项目对象分配给将传递给组件的 selectedTab。
The component that will control the tab view can have the following:
将控制选项卡视图的组件可以具有以下内容：
@Input() item: Item;
And this will pass that object when you click. I might be attacking this from the wrong angle but maybe it will help you in some way.
当您单击时，这将传递该对象。我可能从错误的角度来攻击这个，但也许它会以某种方式帮助你。
