在div中动态加载组件-Angular5

本文介绍了在div中动态加载组件-Angular5的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我能够成功创建一个按钮，单击该按钮可以将我的组件的另一个实例加载到DOM中，但是它将其加载到我希望其位于组件内部的组件之外，从而导致CSS关闭.当我在页面上添加"editorComponents"时，当前看起来像这样:

I was able to successfully create a button that on click loads another instance of my component into the DOM, but it loads it outside the component I want it to be inside which results with the CSS being off. When I add "editorComponents" to my page it currently looks like this:

但是我希望它看起来像这样:

But I want it to look like this:

从检查中可以看到，在第二个示例中，所有标签都被手动移动到了我希望的位置.

You can see from the inspection that in the second example all of the tags are manually moved to where I want them to be.

现在我的代码如下:

home.component.html

<div class="row backgroundContainer">

  <div class="col-md-7 componentContainer">
    <app-editor></app-editor>
    <button (click)="addEditor()" type="button">Add Editor</button>
  </div>

  <div class="col-md-5 componentContainer">
    <app-bible></app-bible>
  </div>

  <div id="footerBox">
    <app-footer></app-footer>
  </div>

</div>

home.component.ts

import { Component, OnInit, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { EditorComponent } from '../editor/editor.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef) {}

  ngOnInit() {
  }

  addEditor() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(EditorComponent);
    const ref = this.viewContainerRef.createComponent(factory);
    ref.changeDetectorRef.detectChanges();
  }

}

那么，当我向页面中动态添加一个EditorComponent时，如何将其直接添加到html中当前"app-editor"下方?

So how do I make it so when I dynamically add an EditorComponent to my page it is added directly below the current "app-editor" in my html?

推荐答案

您需要使用自己的ViewContainerRef.目前，您正在注入根1，并且您可以看到所有组件都附加到<app-root>.

You need to use your own ViewContainerRef. Currently you injecting root one and as you can see all your components appended to <app-root>.

import { Component, OnInit, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { EditorComponent } from '../editor/editor.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  // Setup custom viewChild here
  @ViewChild('container', { read: ViewContainerRef }) viewContainerRef: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit() {
  }

  addEditor() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(EditorComponent);
    const ref = this.viewContainerRef.createComponent(factory);
    ref.changeDetectorRef.detectChanges();
  }

}

现在将home.component.html内的内容放置在希望实例化编辑器的位置

Now inside your home.component.html put this where you want your editors to be instantiated

<div #container></div>

您可以在此处使用任何html标记.

You can use any html tag here.

现在，您所有的编辑器都将位于此块内.

Now all your editors will be inside this block.

这篇关于在div中动态加载组件-Angular5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

angular5