Angular 在模板中向@Input 传递一个多行字符串

Question

我想做的事情是：

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

我不想传递包含多行字符串的属性组件，我想直接在模板中传递它。

我怎样才能做到这一点？

PS - 变量对我不起作用，因为我传递的字符串 - 是 html，对于每个通过 @Input 获取数据的 SubComponent 都是唯一的.

我尝试传递的字符串示例：

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

ngFor 也不适合那个网格，因为我在页面组件中定义了每个部分和 DemoComponent

Answer 1

简短的回答是：不，你不能像那样将任意标记放入模板的属性中。但是，您可以做的（可能更多 Angular-y）是将配置移动到组件 class 中，然后干掉模板：

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);
  }
}

请注意，反引号需要转义，但标题中的其他所有内容都会保留 as-is。

已渲染 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 分解成单独的嵌套组件，以便于开发和测试。

Answer 2

如果您想在模板中执行此操作，可以使用 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

Angular 在模板中向@Input 传递一个多行字符串

Angular pass to @Input a multiline string right in the template

angular-template

angular