相关疑难解决方法(0)

我想创建动态组件并将这些组件的视图插入到容器中.

我认为这可以通过ViewContainerRef来实现.

但我不知道,我们能得到ViewContainerRef任何组件吗？如果是的话怎么样？我是Angular的新手,如果有任何其他好的解决方案可以处理这种情况,请建议我.

更新 我认为,我非常接近解决方案.下面是代码.

app.component.ts

import {Component} from '@angular/core';
import {ContainerComponet} from './container.component'

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

    constructor() { }

 }

container.component.ts

import {Component, ComponentResolver, ViewContainerRef} from '@angular/core'
import {controlBoxComponent as controlBox} from './controlBox.component';

@Component({
    selector: 'container',
    template: 'container'    
})
export class ContainerComponet {
    constructor(viewContainer: ViewContainerRef, private _cr: ComponentResolver) {

        this._cr.resolveComponent(controlBox)
            .then(cmpFactory => {
                const ctxInjector = viewContainer.injector;
                return viewContainer.createComponent(cmpFactory, 0,  ctxInjector);
            })

    } …

有没有办法在angular2中动态加载模板？在angular1中,我使用ng-include html在主控制器视图中加载不同的模板.我知道angular2只能接受1个templateUrl并且ng-include在angular2中进行了Google搜索并找不到任何引用.

我有这个代码:

import { Component, ElementRef, Renderer2 } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<button (click)="runR()">Run</button>
<div class="testme">
    <div class="somediv">
        <div class="dynamically_created_div unique_identifier"></div>
        <div class="dynamically_created_div unique_identifier"></div>
        <div class="dynamically_created_div unique_identifier"></div>
    </div>
</div>',
})

export class AppComponent{
    hostEl: any;

    constructor(
        private el:ElementRef,
        private renderer:Renderer2,
    )  {
        this.hostEl = el.nativeElement;
    }

    runR(){
        let change_this;
        change_this= this.renderer.createElement('span');
        this.renderer.addClass(change_this, 'change_this');
        this.renderer.appendChild(this.hostEl, change_this);      
    }

}

Angular2中有没有办法将HTML添加到.dynamically_created_div？因为上面只添加了组件的HTML结尾.

我也尝试过:

import { Component, ElementRef, ViewChild, Renderer, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<button (click)="runR()">Run</button>
<div …

我有两个组成部分。1.应用程序组件，2.子组件。

为了更好地理解，代码和输出位于stackblitz中：https ://stackblitz.com/edit/angular-j9cwzl

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div id="child"></div>
    <div id="{{childComponent}}"></div>
  `
})
export class AppComponent  {
  childComponent='child';
}

child.component.ts

import { Component } from '@angular/core';

@Component({
  selector: '[id=child]',
  template: '<div>I am child</div>'
})
export class ChildComponent  { }

当我直接在App组件的模板中写入子组件的ID时，它的呈现效果很好。但是，当我通过变量编写子组件的ID时，它只会创建一个id为“ child”的div元素。

我的问题是为什么会这样？如何通过脚本文件中的变量动态渲染具有ID的孩子？

我的目标是创建子组件并插入父组件模板.有一些例子可以做到这一点.但是,我在父组件中动态创建父组件模板(DOM元素),而大多数示例静态创建带有capture元素的模板.

这是代码

app.component

import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver} from '@angular/core';
import {NewChildComponent} from "./newChild.component";

@Component({
 selector: 'app-main',
 templateUrl: 'app.component.html'
})
export class AppComponent {

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

 constructor (private componentFactoryResolver: ComponentFactoryResolver) {
 var childComponent = this.componentFactoryResolver.resolveComponentFactory(NewChildComponent); 

 var myArea = document.getElementById('myArea');
 var myRow = document.createElement("div");
 myArea.appendChild(myRow);

 //I want to add the capture element #myCapture as a child of myRow
 //Add something like this <div #captureElement></div> programmatically through JS/TS
 // How can I do this?

 // I then …