Question

这个问题听起来可能很愚蠢，但我还是会尝试一下：

是否可以多次使用组件但内容不同？类似于模板。

确切地说，我只想编写一次组件，然后在内容不同的不同地方使用它-例如（我不知道这是否有意义，如果可以的话，如何实现）通过从分配的模型中获取一些文本来填充div，以便我可以单独添加另一个模型编辑组件本身？

Answer 1

使用<ng-content>。插图：

app.component.html

<my-component>
   <p>I'm getting projected into a component from outside because of ng-content</p>
</my-component>

my.component.html

<p>Data from my own component</p>
   <ng-content></ng-content>
<p>Data from my own component</p>

通过使用<ng-content>，您可以将数据从外部投影到内部的中。您可以通过多种方式使用它，而无需更改原始组件。

Answer 2

使用输入将数据传递到组件的一种方式。

<my-component [text]="myText"></my-component>

然后在组件中，您可以使用：

@Input() text: Person;

并将其显示在您的模板中

Answer 3

您可以为此使用ng-content。请找到下面的伪代码

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let meta = [1, 0, 1];
let size = 4;

let j = 0;
for (let i = 0; i < meta.length; i++) {
  console.log('Meta', i+1);
  if (meta[i]) {
      for(let k = j; k < j+size && k < data.length; k++) {
        console.log(data[k]);
      }
      j+=size;
  } else {
    console.log("-- Nothing --");
  }
}

创建组件模板以多次使用-Angular

3 个答案: