Question

我开始学习Angular，现在我用它来创建聊天界面。

主要部分将是一个以文本气泡形式显示来自用户和助手的消息的框，一个用户可以在其中键入将发送到聊天室的文本的框以及一个用于发送聊天内容的按钮。聊天框。

我为用户文本泡泡创建了一个组件。如何做到这一点，以便在提交输入时创建UserTextBubble的新实例并将其附加到屏幕上的聊天对话框中？

我知道我可以创建一个数组并对其进行遍历以在屏幕上显示一个列表，但是如果可能的话，我不想将对话的所有输入都保留在内存中。我只想将其插入屏幕上，然后将其留在屏幕上即可。

Answer 1

您可以像对待任何其他html元素一样对待组件，并使用NgFor对其进行循环，以提供任何必要的数据。

fake.component.html

<div>
  <your-component-selector-name *ngFor="let array of yourArry"></your-component-selector-name>
</div>

文档https://angular.io/guide/component-interaction

中有关组件交互的一些好信息

Answer 2

您可以使用ViewContainerRef动态添加组件。

要实现此目的，您只需将ng-template添加到带有模板引用的组件html文件中即可。

<ng-template #chatContainer></ng-template>

然后在*.component.ts中，使用UserTextBubbleComponent将ng-template添加到ViewContainerRef

要从模板中获取ViewContainerRef，可以使用上一步中定义的#chatContainer通过使用@ViewChild()来访问它。

@ViewChild('chatContainer', {read: ViewContainerRef}) vc: ViewContainerRef;

您还将需要ComponentFactoryResolver，因此将其添加到constructor()

constructor(private factory: ComponentFactoryResolver) {}

要将组件添加到#chatContainer中，可以使用此方法

  addComponent(text) {
    const factory = this.factory.resolveComponentFactory(UserTextBubbleComponent);
    const componentRef = this.vc.createComponent(factory);
    (componentRef.instance).textToDisplay = text;
  }

此方法的作用是为ComponentFactoryResolver创建UserTextBubbleComponent，这将允许您通过createComponent创建它。

最后一行代替了@Input()内的某些UserTextBubbleComponent。

要像这样使用它，还需要在组件内部定义textToDisplay。

因此，在textToDisplay内添加UserTextBubbleComponent将成为聊天气泡的值。

public textToDisplay: string;

您可能还需要将UserTextBubbleComponent添加到entryComponents数组中。在AppModule内的imports下添加

 @NgModule({
  imports:      [ BrowserModule, ...],
  declarations: [ AppComponent, UserTextBubbleComponent, ...],
  bootstrap:    [ AppComponent],
  entryComponents: [UserTextBubbleComponent, ...]
})
export class AppModule { }

我也做了example

如何创建角度组件的多个实例？

2 个答案: