Angular 2 - 具有不同文本的相同组件答案

【问题标题】：Angular 2 - same component with different textAngular 2 - 具有不同文本的相同组件
【发布时间】：2016-12-26 20:33:47
【问题描述】：

我想多次使用相同的组件，但使用不同的文本。我该怎么做？

我的代码： jumbotron.component.html：

<div class="jumbotron text-center">
   <h1 >{{jumbotronText}}</h1>
</div>

app.component.ts

@Component({
selector: 'my-app',
template: `
            <navbar></navbar>
            <jumbotron ></jumbotron>
            <jumbotron ></jumbotron>
            <jumbotron ></jumbotron>
            `
            ,
directives: [NavbarComponent, JumbotronComponent]})
export class AppComponent { }

我试过这样做：

        <jumbotron [jumbotronText]="My text to display"></jumbotron>

还有这个：

        <jumbotron jumbotronText="My text to display"></jumbotron>

但只有错误。我认为这应该很容易，但我不知道如何解决这个问题。

【问题讨论】：

标签： data-binding angular components

【解决方案1】：

首先，您必须在 Jumbotron 组件中使用 Input() 注释标记 jumbotronText：

@Component({
  selector: 'jumbotron',
  template: `
    <div class="jumbotron text-center">
      <h1 >{{jumbotronText}}</h1>
    </div>`
})
export class JumbotronComponent {
  //here is important line
  @Input() jumbotronText:string = "";
  constructor() { }
}

然后，您可以从调用方传入数据。如果是静态文本，您可以这样做：

template: `
  <navbar></navbar>
  <jumbotron jumbotronText="One" ></jumbotron>
  <jumbotron jumbotronText="Two" ></jumbotron>
  <jumbotron jumbotronText="Three" ></jumbotron>`

如果它是计算文本，你会这样做：

template: `
  <navbar></navbar>
  <jumbotron [jumbotronText]="variableFromCaller1" ></jumbotron>
  <jumbotron [jumbotronText]="variableFromCaller2" ></jumbotron>
  <jumbotron [jumbotronText]="variableFromCaller3" ></jumbotron>`

也就是说，如果您在应用程序组件中有存储字符串（或方法，或以其他方式计算）的变量，则使用方括号表示单向绑定。否则，如果您有静态文本，您只需将 Input() 值指定为与任何其他 HTML 标记属性相同。

看到这个 Plunker：https://embed.plnkr.co/ve31cnEDidcLeEF7dfVj/

【讨论】：

是的，我看到了，我没有导入输入。非常感谢！

【解决方案2】：

您需要使用@Input 或ng-content。通过使用{{ }} 语法，你告诉Angular 在AppComponent 中寻找一个名为jumbotronText 的变量，但它并不存在。

使用`@Input()`

jumbotron.component.html

<div class="jumbotron text-center">
    <h1>{{ jumbotronText }}</h1>
</div>

jumbotron.component.ts

@Component({
    // ...
}) export class JumbotronComponent {

    @Input() jumbotronText: string;

    // ...
}

app.component.ts

@Component({
    selector: 'my-app',
    template: `
        <navbar></navbar>
        <jumbotron [jumbotronText]="My text to display"></jumbotron>
        `
        ,
    directives: [NavbarComponent, JumbotronComponent]})
export class AppComponent { }

使用`ng-content`

jumbotron.component.html

<div class="jumbotron text-center">
    <h1><ng-content></ng-content></h1>
</div>

app.component.ts

@Component({
    selector: 'my-app',
    template: `
        <navbar></navbar>
        <jumbotron>My text to display</jumbotron>
        `
        ,
    directives: [NavbarComponent, JumbotronComponent]})
export class AppComponent { }

【讨论】：

【解决方案3】：

补充卢克的答案。您必须从

导入 Input 注释

@angular/core

在属性上使用@Input() 注释时。您可以添加字符串作为参数以使用别名引用属性。例子： @Input("customTitle") Private title:string;

您可以稍后使用 <my-directive [customTitle]="Custom" > </my-directive>

【讨论】：

使用@Input()

使用ng-content

使用`@Input()`

使用`ng-content`