我想动态创建模板.这应该用于ComponentType在运行时构建一个并在托管组件内部放置(甚至替换)它.
直到我使用RC4 ComponentResolver,但RC5我收到消息:
ComponentResolver不推荐用于动态编译.使用ComponentFactoryResolver连同@NgModule/@Component.entryComponents或ANALYZE_FOR_ENTRY_COMPONENTS提供商,而不是.对于仅运行时编译,您也可以使用Compiler.compileComponentSync/Async.
我发现了这个(官方的angular2)文件
并了解我可以使用其中之一
ngIf用ComponentFactoryResolver.如果我将已知组件传递到托管内部@Component({entryComponents: [comp1, comp2], ...})- 我可以使用.resolveComponentFactory(componentToRender);Compiler...但问题是如何使用它Compiler？上面的注释说我应该打电话:Compiler.compileComponentSync/Async- 那怎么样？
例如.我想为一种设置创建(基于一些配置条件)这种模板
<form>
<string-editor
[propertyName]="'code'"
[entity]="entity"
></string-editor>
<string-editor
[propertyName]="'description'"
[entity]="entity"
></string-editor>
...
在另一种情况下这个(string-editor被替换text-editor)
<form>
<text-editor
[propertyName]="'code'"
[entity]="entity"
></text-editor>
...
等等(editors属性类型的不同数量/日期/引用,跳过一些用户的某些属性......).即这是一个例子,真正的配置可以生成更多不同和复杂的模板.
该 …
我想手动编译一些包含HTML的指令.$compileAngular 2中的等价物是什么？
例如,在Angular 1中,我可以动态编译HTML片段并将其附加到DOM:
var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);
我正在开发依赖于的Ionicapp(2.0.0-rc0)angular 2.所以新的介绍ngModules包括在内.我在app.module.ts.下面添加我的.
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Users } from '../pages/users/users';
@NgModule({
declarations: [
MyApp,
Users
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Users
]
})
export class AppModule {}
是什么entryComponents在这里做？Components已定义于declarations.那么重复它们的必要性是什么？如果我在这里不包含组件会怎么样？
给定一个包含多个字段的页面部分的模型,并使用如下数据填充:
{
"fields": [
{
"id": 1,
"type": "text",
"caption": "Name",
"value": "Bob"
},
{
"id": 2,
"type": "bool",
"caption": "Over 24?",
"value": 0
},
{
"id": 3,
"type": "options",
"options" : [ "M", "F"],
"caption": "Gender",
"value": "M"
}
]
}
我想有一个通用的部分组件,它不知道它可能包装的不同类型的字段,以避免部分模板中的大量条件逻辑,并通过放入自我来添加新的字段类型视图/组件包含文件,而不必修改单独的组件.
我的理想是,Component的选择器足够具体,我可以通过基于绑定到模型的属性值在父Component的模板中选择一个元素来实现这一点.例如:(原谅任何语法问题,因为我在SO窗口中对此进行了编码,要注意的主要部分是BooleanComponent.ts上的选择器
SectionComponent.ts
@Component({
selector: 'my-app'
})
@View({
template: `
<section>
<div *ng-for="#field of fields">
<field type="{{field.type}}"></field>
</div>
</section>
`,
directives: [NgFor]
})
class SectionComponent {
fields: Array<field>;
constructor() {
this.fields = // retrieve section fields via service …我想创建动态组件并将这些组件的视图插入到容器中.
我认为这可以通过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在视图中显示它们？如何确保将注射剂正确注射到儿童组件中？
import {Component, View, bootstrap} from 'angular2/angular2';
import {ChildComponent} from './ChildComponent';
@Component({
selector: 'parent'
})
@View({
template: `
<div>
<h1>the children:</h1>
<!-- ??? three child views shall be inserted here ??? -->
</div>`,
directives: [ChildComponent]
})
class ParentComponent {
children: ChildComponent[];
constructor() {
// when creating the children, their constructors
// shall still be called with the injectables.
// E.g. constructor(childName:string, additionalInjectable:SomeInjectable)
children.push(new ChildComponent("Child A"));
children.push(new ChildComponent("Child B"));
children.push(new ChildComponent("Child C"));
// How to create the …目前的官方文档仅显示如何动态更改标记内的组件<ng-template>.https://angular.io/guide/dynamic-component-loader
我想实现的是,让我们说我有3个部分组成:header,section,并footer具有以下选择:
<app-header>
<app-section>
<app-footer>
再有6个按钮,这将增加或删除每个组件:Add Header,Add Section,和Add Footer
当我点击时Add Header,页面将添加<app-header>到呈现它的页面,因此页面将包含:
<app-header>
然后如果我点击Add Section两次,该页面现在将包含:
<app-header>
<app-section>
<app-section>
如果我点击Add Footer,页面将包含所有这些组件:
<app-header>
<app-section>
<app-section>
<app-footer>
是否有可能在Angular中实现这一目标？请注意,这ngFor不是我正在寻找的解决方案,因为它只允许向页面添加相同的组件,而不是不同的组件.
编辑:ngIf和ngFor不是我正在寻找的解决方案,因为模板已经预先确定.我正在寻找的东西就像一堆组件或一组组件,我们可以轻松地添加,删除和更改数组的任何索引.
编辑2:为了使它更清楚,让我们有另一个例子说明为什么ngFor不起作用.假设我们有以下组件:
<app-header>
<app-introduction>
<app-camera>
<app-editor>
<app-footer>
现在,这里有一个新组件,ngIf用户希望在其间插入ngFor.ngFor只有在我想要循环遍历的同一个组件时才有效.但是对于不同的组件,ngFor在这里失败了.
如何处理/提供@Input,并@Output在角2动态创建组件的属性？
这个想法是在调用createSub方法时动态创建(在这种情况下)SubComponent.分叉很好,但我如何为SubComponent中的属性提供数据.另外,如何处理/订阅SubComponent提供的事件？@Input@Output
例如: (两个部件在相同的NgModule)
AppComponent
@Component({
selector: 'app-root'
})
export class AppComponent {
someData: 'asdfasf'
constructor(private resolver: ComponentFactoryResolver, private location: ViewContainerRef) { }
createSub() {
const factory = this.resolver.resolveComponentFactory(SubComponent);
const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
ref.changeDetectorRef.detectChanges();
return ref;
}
onClick() {
// do something
}
}
子
@Component({
selector: 'app-sub'
})
export class SubComponent {
@Input('data') someData: string;
@Output('onClick') onClick = new EventEmitter();
}
我有一个如此大的html菜单,我决定绑定,以便能够进行几个子菜单下拉,并避免HTML代码重复.父>孩子(也是父母)>孩子......
对于上下文:在ng2_msList/msList.components.ts中,ColumnsManagements.ts作为this.ColumnsManagementInstance导入.innerHTML菜单正确显示在ng2_msList/pages/list.html中:
<!-- COLUMNS DROPDOWN BUTTON -->
<ul [innerHTML]="msList.ColumnsManagementInstance.columnMenu" class="dropdown-menu" role="menu"> </ul>
使用(在我的代码的一个非常简化的版本中):(感谢这个Stack Q)
setHtmlColumnsMenu() {
var self = this;
var htmlcolumnsmenu = '';
[...]
htmlcolumnsmenu += this.createColumnsList(this.getNoneRelationalColumns(true));
// which return something like a lot of html content and sometime in it :
// <a href="javascript:;" (click)="msList.ColumnsManagementInstance.toogleColumn(column)">
[...]
return htmlcolumnsmenu;
}
但是(单击)="msList.ColumnsManagementInstance.toogleColumn(列)"(以前在html内容中)不再有效.它在视图中写为标签中的简单文本(在未显示的innerHtml之前).
我无法达到让它重新运作的方法.我测试多种方式来调用函数或我在网站链接中发现作为对昂文件部分,这里的例子.这些示例调用一个非常容易在同一文件/上下文中设置的函数(click)="MyAction()"但是在我的上下文中我无法正确调用它.
应用程序架构可能不像Angular2点击调用所期望的那样.
我有一个父组件,它在点击链接时打开一个新组件,这个新组件应该有一个关闭按钮,在关闭时向父发送一个关闭消息并销毁自己.
我们可以使用ngOnDestroy方法发送结束消息,但是如何调用子组件的销毁.
<parent>
<child></child> //child to be opened on click but close
//event should be inside the child componenet
</parent>
如果我在这里遇到一些概念错误,请纠正我.谢谢