如何将动态名称设置为angular 2组件？
我的模板中有下一个代码：
<{{component} [data]="data" [anotherData]="anotherData"></{{component}}>
我想在类中定义componentName
component: string = 'component';
因为现在我有下一个错误：
Uncaught (in promise): Template parse errors:
Unexpected closing tag "{{component}" ("
在角度2中创建动态组件时,我发现此过程需要ViewContainerRef才能将新创建的组件添加到DOM.
Angular 2动态选项卡,用户单击所选组件 https://www.lucidchart.com/techblog/2016/07/19/building-angular-2-components-on-the-fly-a-dialog-box-example/
在将输入和输出传递给那些动态创建的组件时,我在上面的第二个链接中找到了答案:https: //codedump.io/share/kQakwDKNu0iG/1/passing-input-while-creating-angular-2-组件的动态使用-componentresolver
但是,如果我要创建一个名为shape.service的服务,其中包含使用bgColor等输入返回不同形状组件的函数,我不知道该服务如何在不指定DOM位置的情况下创建组件,以及容器组件如何接收这个返回的组件(可能是它的类型将是ComponentRef)来自服务并将其注入DOM容器组件指定.
例如,服务包含一个功能:
getCircle(bgColor:string): ComponentRef<Circle> {
let circleFactory = componentFactoryResolver.resolveComponentFactory(CircleComponent);
let circleCompRef = this.viewContainerRef.createComponent(circleFactory);
circleCompRef.instance.bgColor = bgColor;
return circleCompRef;
}
第一个问题在这里提出,我如何ViewContainerRef在此期间指出无处？我导入viewContainerRef的原因是动态创建组件.
第二个问题是容器组件@Input从服务接收特定于输入的内容后,它将如何注入其DOM？
提前致谢!
更新: 我认为上面的问题不够具体.我遇到的情况是:
这意味着服务调用组件不知道这些componentRef将被注入的位置.简而言之,我需要可以随时随地注入的独立组件对象.
我已经好几次读过rumTimeCompiler解决方案,但我真的不知道它是如何工作的.与使用viewContainerRef创建组件相比,似乎有太多工作要做.如果我找不到其他解决方案,我会深入研究一下......
所以我有一个来自from的组件，该@Output事件在提交时触发，如下所示：
@Component({
selector: 'some-component',
templateUrl: './SomeComponent.html'
})
export class SomeComponent{
@Input() data: any;
@Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();
constructor(private someService: SomeService) {}
submitForm(): void{
this.someService.updateBackend(this.data, ()=>{
this.onSubmit.emit();
});
}
}
我正在使用ngFor创建该Component的多个元素：
<template let-data ngFor [ngForOf]="dataCollection">
<some-component [data]="data" (onSubmit)="doSomthing()"></some-component>
</template>
最后缺少的部分是用于提交的服务：
@Injectable()
export class SomeService{
constructor() {}
updateBackend(data: any, callback: () => void): void{
/*
* updating the backend
*/.then((result) => {
const { errors, data } = result;
if (data) {
callback();
}
})
} …我正在使用 ngComponentOutlet 动态创建一个组件。听起来好像：
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'alert-success',
template: `
<p>Alert success</p>
`,
})
export class AlertSuccessComponent { }
@Component({
selector: 'alert-danger',
template: `
<p>Alert danger</p>
`,
})
export class AlertDangerComponent {
test = 'danger...';
}
@Component({
selector: 'my-app',
template: `
<h1>Angular version 4</h1>
<ng-container *ngComponentOutlet="alert"></ng-container>
<button (click)="changeComponent()">Change component</button>
`,
})
export class App {
alert = AlertSuccessComponent;
changeComponent() {
this.alert = AlertDangerComponent;
alert(this.alert.test); <-- ???????
}
}
@NgModule({
imports: [ BrowserModule ], …我正在尝试在Angular 2中实现一个ComponentContainer,这样你就可以动态添加其他组件,类似于Android中的LinearLayout.
到目前为止,使用 Angular 2动态选项卡和用户单击选择的组件, 我可以动态添加传递Type的组件.
我的问题是使用这个方法,创建的Component只是由它的Type创建,我不知道如何给它提供参数.
这就是我所做的:
container.component.ts
import {
Component,
OnChanges,
AfterViewInit,
OnDestroy,
Input,
Type,
ViewChild,
ViewContainerRef,
ComponentRef,
ComponentResolver,
ComponentFactory
} from '@angular/core';
@Component({
selector: 'wrapper-component',
template: '<div #container></div>'
})
class WrapperComponent implements OnChanges, AfterViewInit, OnDestroy {
@Input() type: Type;
@ViewChild('container', {read: ViewContainerRef}) container;
cmpRef: ComponentRef<any>;
private isViewInitialized: boolean = false;
constructor(private resolver: ComponentResolver) { }
private updateComponent() {
if(!this.isViewInitialized)
return;
if(this.cmpRef)
this.cmpRef.destroy();
this.resolver.resolveComponent(this.type).then((factory: ComponentFactory<any>) => {
this.cmpRef = this.container.createComponent(factory);
})
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() { …我正在尝试创建一个可配置的可重用表。单元格可以配置为具有 html 模板。
我正在配置“ Review ”列，使其具有带有带有点击事件的锚标记的 html 模板（review(row)）。
到目前为止，我尝试将此模板作为innerHTML 插入，但所有角度绑定都不起作用。然后我尝试创建一个动态调用的组件（review.component.ts），但该组件仅在第一行调用一次。此外，我没有找到任何方法将当前行项目传递给单击事件 review(row) （在 review.component.ts 内）。
雇员.组件.ts：
import { Component, OnInit, DynamicComponentLoader, ElementRef, Inject, Injector} from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {DataTableComponent} from '../../data_table/data_table.component';
import {DataTable} from '../../data_table/dataTable';
import {Cell} from '../../data_table/cell';
import {ReviewComponent} from './review.component';
@Component({
selector: 'employee',
templateUrl: './app/employee/employee.html',
directives: [DataTableComponent, ReviewComponent, RouterLink, RouterOutlet, ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
export class EmployeeComponent implements OnInit {
public tableConfig: DataTable;
public …我正在关注GünterZöchbauer关于如何创建动态组件的建议 ,我想知道如何将值传递给它 - 就像在子组件中有@input.
使用上面问题中给出的plunker示例 - plunker - 如何将子组件传递给一个字符串,让我们调用它,然后在单击"添加"按钮时显示该消息.
以下是子组件外观的示例:
import {Component OnChanges, Input} from '@angular/core'
@Component({
selector: 'hello',
providers: [],
template: `<h1>{{message}}</h1>`,
directives: []
})
export class HelloComponent implements OnChanges {
@Input() message:any;
constructor() {
}
ngOnChanges(changes:any){
}
}
我'，试图动态地向 div 添加一个 html 控件，在创建控件后，我想通过创建 viewchild 对其执行操作
@ViewChild('dropDownListReference') myDropDownList: typeOfComponent
能够在类中创建但在生成控件后的方法中无法初始化此
AddLevelClick() {
var el: HTMLElement = document.getElementById('multi-sort-body');
el.innerHTML = "<div #test1></div>";
@ViewChild('test1') myDropDownList: typeOfComponent // Unable to create here
}
关于在本地创建 ViewChild 元素的任何线索？
我的目标是创建子组件并插入父组件模板.有一些例子可以做到这一点.但是,我在父组件中动态创建父组件模板(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 …我正在创建一个表单，从后端获取字段。映射后，我有这样的东西：
genericFilters: {
iboId: {
'display': false,
'template': ''
},
iboCode: {
'display': true,
'template': 'text_input_iboCode',
/*'template': 'text/iboCode'*/
},
iboName: {
'display': true,
'template': 'text_input_iboName'
},
iboSurname: {
'display': true,
'template': 'text_input_iboSurname'
},
iboRank: {
'display': false,
'template': 'multiselect_iboRank',
/*'template': 'select/multi_iboRank',*/
},
iboEmail: {
'display': false,
'template': 'text_input_iboEmail'
},
iboNewsletter: {
'display': true,
'template': 'simple_select_iboNewsletter',
/*'template': 'select/simple_iboNewsletter',*/
},
};
我的想法是在应用程序级别为表单字段创建每个字段类型（checkbox、multiselect、text、等）。radio并使用上面的映射JSON将某种字段类型应用于从后端接收的每个字段。
在我的示例中，该字段iboId应具有字段类型<text_input_iboCode>。
所以，在我看来，我不想有这样的事情：
<text_input_iboCode></text_input_iboCode>
<text_input_iboName></text_input_iboName>
<text_input_iboSurname></text_input_iboSurname>
我实际上想让表单创建更抽象，如下所示： …
angular ×10
typescript ×5
components ×2
javascript ×2
angular4 ×1
angularjs ×1
ngfor ×1
this ×1
viewchild ×1