Angular 如何将模板数组传递给角度组件

我是Angular的新手，我想创建一个旋转木马作为共享组件。这个组件的DOM基于最新版本的引导，我希望调用方注入模板

例如，我有一个carouselComponent的DOM，如下所示：

<div class="carousel">
    <div class="carousel-indicators">
        <!-- foreach template passing by the caller
        <div data-index="0"></div>
        -->
    </div>
    <div class="carousel-inner">
        <!-- foreach template passing by the caller
        <div class="carousel-item" data-index="0"></div>
        -->
    </div>
</div>

所以在我的脑海里，我想：

<carousel>
    <template-list>
        <div dataIndex="0">Ciao Mondo!</div>
        <div dataIndex="1">Hello World!</div>
        <div dataIndex="2">Hola Mundo!</div>
    </template-list>
</carousel>

再见！
你好，世界！
你好，蒙多！

所有转盘指示器均以模板列表为基础进行计算，转盘内部填充由div.carousel-item包装的所有模板（在模板列表中）

但是我没有找到解决这个问题的方法。 我的需求是为了满足分离组件和逻辑的需求，这样我就可以重用那个组件

---

非常感谢所有人！：）

角度组件将只有一个在component.ts文件中定义的模板

---

但在html文件中，您可以使用添加子模板，并根据需要进行切换

Angular component将在component.ts文件中仅定义一个模板

---

但在html文件中，您可以使用添加子模板，并根据需要进行切换

您可以尝试以下操作：

TS

   array=[ 
            '<div dataIndex="0">Ciao Mondo!</div>',
            '<div dataIndex="1">Hello World!</div>',
            '<div dataIndex="2">Hola Mundo!</div>'
            ].toString().replace(/,/g, '');

array=[
“再见！”，
“你好，世界！”，
“你好，蒙多！”
].toString（）。替换（/，/g，）；

HTML

    <div [innerHTML]="array"></div>

---

您可以尝试以下方法：

TS

   array=[ 
            '<div dataIndex="0">Ciao Mondo!</div>',
            '<div dataIndex="1">Hello World!</div>',
            '<div dataIndex="2">Hola Mundo!</div>'
            ].toString().replace(/,/g, '');

array=[
“再见！”，
“你好，世界！”，
“你好，蒙多！”
].toString（）。替换（/，/g，）；

HTML

    <div [innerHTML]="array"></div>

---

将HTML作为输入传递不是一个好主意，因为您以后可能需要绑定一些数据，所以您应该将渲染保留在子组件上，但您可以从父组件传递数据，这样您就可以创建所需对象的列表，然后将其作为输入传递给组件：

在parent.component.ts中：

templateList = [
  {
    "id": 0,
    "text": "Ciao Mondo!"
  },
  {
    "id": 1,
    "text": "Hello World!"
  },
  {
    "id": 2,
    "text": "Hola Mundo!"
  }
]

@Input()
templateList: any[];

在parent.component.html中：

<carousel [templateList]="templateList">
</carousel>

<div class="carousel">
    <div class="carousel-indicators">
        <div *ngFor="let data of templateList" [attr.data-index]="data.id"></div>
    </div>
    <div class="carousel-inner">
        <div *ngFor="let data of templateList" class="carousel-item" [attr.data-index]="data.id">{{data.text}}</div>
    </div>
</div>

在carousel.component.html中：

<carousel [templateList]="templateList">
</carousel>

<div class="carousel">
    <div class="carousel-indicators">
        <div *ngFor="let data of templateList" [attr.data-index]="data.id"></div>
    </div>
    <div class="carousel-inner">
        <div *ngFor="let data of templateList" class="carousel-item" [attr.data-index]="data.id">{{data.text}}</div>
    </div>
</div>

{{data.text}

将HTML作为输入传递不是一个好主意，因为您以后可能需要绑定一些数据，所以您应该将渲染保留在子组件上，但您可以从父组件传递数据，这样您就可以创建所需对象的列表，然后将其作为输入传递给组件：

在parent.component.ts中：

templateList = [
  {
    "id": 0,
    "text": "Ciao Mondo!"
  },
  {
    "id": 1,
    "text": "Hello World!"
  },
  {
    "id": 2,
    "text": "Hola Mundo!"
  }
]

@Input()
templateList: any[];

在parent.component.html中：

<carousel [templateList]="templateList">
</carousel>

<div class="carousel">
    <div class="carousel-indicators">
        <div *ngFor="let data of templateList" [attr.data-index]="data.id"></div>
    </div>
    <div class="carousel-inner">
        <div *ngFor="let data of templateList" class="carousel-item" [attr.data-index]="data.id">{{data.text}}</div>
    </div>
</div>

在carousel.component.html中：

<carousel [templateList]="templateList">
</carousel>

<div class="carousel">
    <div class="carousel-indicators">
        <div *ngFor="let data of templateList" [attr.data-index]="data.id"></div>
    </div>
    <div class="carousel-inner">
        <div *ngFor="let data of templateList" class="carousel-item" [attr.data-index]="data.id">{{data.text}}</div>
    </div>
</div>

{{data.text}

已经有了一个旋转木马组件，它是为带有角度传感器的引导开发的。你可以看看他们是如何实现的，因为我认为他们的方法是最好的。现在已经有了一个旋转木马组件，它是为具有角度的引导开发的。你可以看看他们是如何实现的，因为我认为他们的方法是最好的。好啊但是我想用登录/注册表单填充旋转木马，我可以根据用户的需要切换表单：登录或注册。所以我想用模板填充它来呈现…你可以有一个单独的登录组件，你可以重定向到它或者基于ngIf调用它，让它们都在同一个组件中会增加耦合，显然你想减少耦合。。。但是我想用登录/注册表单填充旋转木马，我可以根据用户的需要切换表单：登录或注册。所以我想用模板来填充它来呈现…你可以有一个单独的登录组件，你可以重定向到它或基于ngIf调用它，让它们都在同一个组件中会增加耦合，这显然是你想要减少的。这不是一个优雅的解决方案如果我必须绑定一些事件，比如单击？（我想是登录/注册的表单进入旋转木马）你在问题中没有具体说明。这解决了你最初的问题这不是一个优雅的解决方案如果我必须绑定一些事件，比如单击？（我想是登录/注册的表单进入旋转木马）你在问题中没有具体说明。这就解决了你原来的问题