角2/4傳球@input一個多行字符串右模板

我想要做的事情是：角2/4傳球@input一個多行字符串右模板

<app-preview 
    [title]="'Some words 
    'which' "can" <be> 
    `surrounded` by any quotes 
     and located in several lines 
    '" 
    </app-preview>

我想通過不含有多串組件的屬性，我想在模板中通過它。

我該如何做到這一點？

PS - 變量對我來說不起作用，因爲我傳遞的字符串是html，它們對於每個SubComponent都是唯一的，它可以通過@Input獲取數據。字符串的

例子中，我試圖通過：

<app-preview 
    [title]="'Default (disabled)'" 
    [lang]="'html'" 
    [code]=" 
     <am-input 
     [placeholder]="'Placeholder'" 
     [disabled]="true"> 
     </am-input> 
    "> 
    </app-preview>

ngFor也不合適與格，因爲我確定正確的頁面組件每科和DemoComponent

來源

2017-07-16 Andrey Ponomarenko

爲什麼你想在模板中做到這一點？你想要渲染的結果是什麼？ – jonrsharpe

@jonrsharpe因爲我的'Component'有大約60個'SubComponents'，它必須爲每個'SubComponent'多行字符串接收唯一的。在'Component'中創建60個屬性，我認爲這是一個不好的解決方案 –

爲什麼你要創建60個屬性？只需要在這些輸入的*數組*中包含一個'ngFor'。這將比模板中的60個子組件更好看。 – jonrsharpe

簡短的回答是：不，你不能把任意標記像這樣模板中的屬性。但是，你可以做什麼（這可能是更加棱角分明，y）爲移動配置到組件類和幹出模板：

import { Component } from '@angular/core'; 
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 

@Component({ 
    selector: 'sst-styleguide', 
    template: ` 
    <h1>Style Guide</h1> 
    <div *ngFor="let section of sections"> 
     <h2>{{ section.name }}</h2> 
     <div *ngFor="let component of section.components"> 
     <h3>{{ component.title }}</h3> 
     <div [innerHtml]="safeMarkup(component.markup)"></div> 
     <pre>{{ component.markup }}</pre> 
     </div> 
    </div> 
    `, 
}) 
export class StyleguideComponent { 
    sections = [ 
    { 
     name: 'Input', 
     components: [ 
     { 
      title: ` 
      Some words 
      'which' "can" <be> 
      \`surrounded\` by any quotes 
      and located in several lines 
      `, 
      markup: ` 
      <button>Hello</button> 
      `, 
     }, 
     ], 
    }, 
    ]; 

    constructor(private sanitizer: DomSanitizer) { } 

    safeMarkup(markup: string): SafeHtml { 
    return this.sanitizer.bypassSecurityTrustHtml(markup); 
    } 
}

注意，反引號需要進行轉義，但一切在標題保持原樣。

渲染HTML：

<sst-styleguide _ngcontent-c0=""> 
 
    <h1>Title</h1> 
 
    <!--bindings={ 
 
    "ng-reflect-ng-for-of": "[object Object]" 
 
}--><div> 
 
     <h2>Input</h2> 
 
     <!--bindings={ 
 
    "ng-reflect-ng-for-of": "[object Object]" 
 
}--><div> 
 
     <h3> 
 
      Some words 
 
      'which' "can" &lt;be&gt; 
 
      `surrounded` by any quotes 
 
      and located in several lines 
 
      </h3> 
 
     <div> 
 
      <button>Hello</button> 
 
      </div> 
 
     <pre> 
 
      &lt;button&gt;Hello&lt;/button&gt; 
 
      </pre> 
 
     </div> 
 
    </div> 
 
    </sst-styleguide>

很顯然，在實踐中我分手StyleguideComponent成單獨的嵌套組件，使其更容易開發和測試。

來源

2017-07-16 16:28:50 jonrsharpe

如果你想在模板中使用它，你可以使用CDATA。但首先，你需要創建指令，如：

@Directive({ 
    selector: 'preview-code' 
}) 
export class CodeDirective { 
    constructor(public elRef: ElementRef) {} 

    get code() { 
    return this.elRef.nativeElement.textContent.trim(); 
    } 
}

那麼你的模板會看：

<app-preview title="Default"> 
    <preview-code> 
    <![CDATA[ 
    <am-input 
     placeholder="Placeholder" 
     [disabled]="false"> 
    </am-input> 
    ]]> 
    </preview-code> 
</app-preview>

和內部AppPreview組件，你將能夠獲得code：

@ContentChild(CodeDirective) codeDir; 

ngOnInit() { 
    const template = this.codeDir.code;

Plunker Example

來源

2017-07-16 17:17:33 yurzui

角2/4傳球@input一個多行字符串右模板

回答

相關問題