角2 transclusion，指令內容爲「ALT」

我有一個簡單的問題在這裏，卻無法找到一個解決辦法... 因此，這裏是我的logo.components.ts：角2 transclusion，指令內容爲「ALT」

import {Component} from '../../../../frameworks/core/index'; 

@Component({ 
    moduleId: module.id, 
    selector: 'my-logo', 
    templateUrl: 'logo.component.html', 
    styleUrls: ['logo.component.css'] 
}) 
export class LogoComponent {}

所以我正在導入它在我home.component.ts：

import {LogoComponent} from '../../frameworks/mysite/components/logo/logo.component'; 

<my-logo>AltText</my-logo>

所以我的模板logo.component.html看起來是這樣的：

<div class="logo-icon"> 
    <img alt="" src="../../images/logo-icon.svg" /> 
</div>

所以我想我的

<my-logo>AltText... or any content text from here.... </my-logo>

指令的內容插入到我的logo.component.html， <img alt="INSERTED HERE" src="../../images/logo-icon.svg" />。

我瞭解

<ng-content></ng-content>

但在這種情況下，我不知道要插入到「ALT」有道... 預先感謝您的幫助！

來源

2016-08-22 Matvey Nevazhno

你不能跨入一個屬性，只能給子元素。

您可以通過值屬性

<my-logo alt="AltText"></my-logo>

在你的組件

@Component({ 
    template: ` 
<div class="logo-icon"> 
    <img [alt]="alt" src="../../images/logo-icon.svg" /> 
</div> 
` 
}) 
export class MyLogo { 
    @Input() alt:string; 
}

如果你仍然想使用transclude，您可以使用<ng-content> transclude它的讀取距離的transcluded內容DOM並將其分配給您綁定<img [alt]="...">的屬性，但這非常麻煩。

更新 - 使用transclusion

<div class="logo-icon"> 
    <div #wrapper hidden="true"><ng-content></ng-content><div> 
    <img [alt]="alt" src="../../images/logo-icon.svg" /> 
</div>

得到transcluded內容

export class LogoComponent { 
    @ViewChild('wrapper') content:ElementRef; 

    ngAfterViewInitInit():any { 
    this.alt = this.content.nativeElement.innerHTML; 
    } 
}

來源

2016-08-22 04:57:08

感謝您的回答！但我仍然想知道是否要從指令' AltText'中獲取文本，並將其粘貼到alt中，而不會將'alt =「...」'添加到'' 我最近開始使用角框架，所以也許會問非常愚蠢的問題，缺乏經驗的缺點.... –

我更新了我的答案。參見http://stackoverflow.com/a/37586026/217408 –

'@Input（）alt：string;' - 實際上工作正常 '@ViewChild（'wrapper'）content：ElementRef;' - 這種方法沒有工作雖然，我加倍檢查了一切，但它說alt ='未定義'。 –

角2 transclusion，指令內容爲「ALT」

回答

相關問題