Data binding 角度2-具有不同文本的相同组件

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

我的代码： jumbotron.component.html：

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

{{jumbotronText}}

app.component.ts

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

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

    @Input() jumbotronText: string;

    // ...
}

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

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

@组件({
选择器：“我的应用程序”，
模板：`
`
,
指令：[NavbarComponent，JumbotronComponent]}）
导出类AppComponent{}

我试着这样做：

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

这是：

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

---

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

首先，必须在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() { }
}

@组件({
选择器：“jumbotron”，
模板：`
{{jumbotronText}}
`
})
导出类JumbotronComponent{
//这是一条重要的线路
@Input（）JumborContext:string=“”；
构造函数（）{}
}

然后，您可以从调用方传入数据。如果是静态文本，则可以执行以下操作：

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标记属性相同的值

---

请参见此链接：

首先，必须在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() { }
}

@组件({
选择器：“jumbotron”，
模板：`
{{jumbotronText}}
`
})
导出类JumbotronComponent{
//这是一条重要的线路
@Input（）JumborContext:string=“”；
构造函数（）{}
}

然后，您可以从调用方传入数据。如果是静态文本，则可以执行以下操作：

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标记属性相同的值

---

查看此链接：

您需要使用

@Input

或

ng content

。通过使用

{{}

语法，您告诉Angular在

AppComponent

中查找名为

JumborContext

的变量，但该变量不存在

使用

@Input（）

jumbotron.component.html

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

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

app.component.ts

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

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

    @Input() jumbotronText: string;

    // ...
}

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

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

app.component.ts

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

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

    @Input() jumbotronText: string;

    // ...
}

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

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

@组件({
选择器：“我的应用程序”，
模板：`
我要显示的文本
`
,
指令：[NavbarComponent，JumbotronComponent]}）
导出类AppComponent{}

您需要使用

@Input

或

ng content

。通过使用

{{}

语法，您告诉Angular在

AppComponent

中查找名为

JumborContext

的变量，但该变量不存在

使用

@Input（）

jumbotron.component.html

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

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

app.component.ts

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

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

    @Input() jumbotronText: string;

    // ...
}

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

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

app.component.ts

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

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

    @Input() jumbotronText: string;

    // ...
}

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

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

@组件({
选择器：“我的应用程序”，
模板：`
我要显示的文本
`
,
指令：[NavbarComponent，JumbotronComponent]}）
导出类AppComponent{}

增加了卢克的答案。您必须从导入

输入

注释

@angular/core

在属性上使用

@Input（）

注释时。可以添加字符串作为参数，以使用别名引用属性。 例子：

@Input（“customTitle”）

私有标题：字符串

您可以稍后使用
增加了卢克的答案。您必须从导入
输入
注释

@angular/core

在属性上使用
@Input（）
注释时。可以添加字符串作为参数，以使用别名引用属性。
例子：
@Input（“customTitle”）
私有标题：字符串

您可以稍后使用
是的，我看到了，我没有导入输入。谢谢！是的，我看到了，我没有导入输入。谢谢！