角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一个多行字符串右模板

回答

相关问题