我正在尝试创建一个表组件,它将根据列描述和原始数据构建一个表.
我能够毫无问题地创建基本功能,但我还希望能够覆盖单个单元格的默认呈现,以便能够显示自定义内容(例如,显示链接).
以与DataTables中使用的类似方式,唯一不同的是,我希望能够为具有参数的自定义组件传递名称.
我最初的尝试是这样的,但问题出现了,如果我在列的显示功能中实例化组件,我无法在页面上显示它.
@Component({
selector: 'gt-table',
template: `
<table class="table table-striped table-hover">
<thead>
<tr>
<th *ngFor="#column of columns">
{{ column.title }}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#row of data">
<td *ngFor="#column of columns">
{{ displayCell(row, column) }}
</td>
</tr>
</tbody>
</table>
`
})
export class GTTableComponent implements {
@Input() data:Array<any>;
@Input() columns:Array<any>;
displayCell(row, column) {
if (column.display !== undefined) {
return column.display(row[column.name], row);
} else {
return row[column.name];
}
}
}
在互联网上搜索后,我能够发现,为了在视图中动态加载组件,您需要使用DynamicComponentLoader.
在经历了很多头痛和搜索之后,我能够在这个回复中找到类似于我正在寻找的东西,即使它不是最漂亮的. …
我正在Angular 2(和TypeScript)中构建一个模态组件,它将具有不同的视图/页面.它没有标签,但概念非常相似.基本上我正在努力寻找这样做的方法.
在我的模态组件中,我想输出不同的视图/页面.每个都应该是一个组件本身,因为它们没有任何共同的标记.另外,它们将从服务类中获取数据,因此我需要能够为每个视图编写特定的逻辑.
基本上我想要的是:
// Within my modal component's template
<div *ngFor="#view of views">
// Render view component here
</div>
例如,哪里views可以是组件的数组.我的第一个主要问题是我不确定如何输出我的视图(组件)的集合.
如何在另一个组件中输出组件集合？
此外,我需要一种隐藏和显示视图的方法,这是视图唯一的共同点.我正在考虑isActive在视图中添加一个变量,并根据它显示/隐藏它们.视图组件实现ModalView接口或从基类扩展以添加此逻辑是不好的做法？从我的模态分量,我希望能够控制显示哪个观点,所以我需要的意见,有共同的这个逻辑.
我希望很清楚我想做什么.解决方案可能很简单,但是现在我对如何解决这个问题感到有些困惑.一个代码示例将非常感谢!
这是我的问题，我想在 HTML 模板中包含一个按钮，该按钮链接到外部网站。但是，当读取 HTML 时，谷歌浏览器会说：
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
似乎 Angular 2 的 innerHTML 属性不允许 2 个递归 HTML 绑定。
这是我的代码：
<ion-col width-80 innerHtml="{{ slide.content + '<p><button round full (click)=`'
+ slide.button.url +'`>'+slide.button.text+'</button>' }}"></ion-col>
(click) 属性被删除，只(slide.button.text)显示为单个文本。
任何解决方案？
slide 是这样的：
{
img: 'img/picture.png',
content: `sometext`,
button : {
url: `http://www.foo.com`,
text: `Site foo`
}
}
我正在做的事情:
这是我正在尝试做的一个Plnkr.Plnker - > https://plnkr.co/edit/XpDCGIwd2at9oR74lpY5?p=preview
当用户单击"+组件"时,以下内容将创建组件
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
let ref = this.container.createComponent(componentFactory);
在添加的每个子组件中,当用户单击"Fire Event"时
<span class="initiateParentAction"
(click)="fireEventEmitter()" [class.eventFired]="eventFired==true">Fire Output Event: {{eventFired}}</span>
它称之为以下
fireEventEmitter(){
console.log("Event Fired");
this.parentActionReq.emit({
action: "helloWorld"
});
this.eventFired = true;
setTimeout(() => this.eventFired=false, 2000);
}
父组件(在本例中为"App"组件)正在侦听这些输出,如此处所示
<ng-container #container
(parentActionReq)="childActionInitiated($event)"></ng-container>
我无法从动态创建的组件中获取事件以向父级注册.在Plnker中,"Received child output Event"应该变为true.
在这一点上,我认为由于这些组件是在运行时添加的,我需要以某种方式重新初始化事件检测OnInit.但没有取得进展.
任何建议,提示,指导将在这里表示赞赏.
我对于创建我自己的Observables的道路犹豫不决,因为这似乎是重新创建了轮子,输出完全符合我的目的.
非常感谢你.
我正在使用Angular 2.0.1。
我有一个可以通过其他任何组件使用的组件<ng-content>-效果很好。
我遇到的问题是当我想引用注入的组件时。
如果我知道那<ng-content>将永远只是一个组件，我可以说：
@ContentChild(MyComponent) dynamicTarget: IMyComponent;但是因为它可以是任何组件（我要做出的唯一假设是任何注入的组件都实现了特定的接口），所以变得棘手。
我也尝试过<ng-content #dynamicTarget'>，然后通过说来引用它， @ContentChild('dynamicTarget') dynamicTarget: IMyComponent;但这返回未定义。
有谁知道我该如何告诉Angular 2这个东西是组件的实例，以便我可以尝试在其上调用函数？
为了进一步阐明用例，我有一个多步骤向导，可以将任何组件作为内容，并且我想validate在内容上调用该函数（同样，我会假设在上述实例中存在该函数）
我有一个组件数组,我想显示该数组中的现有组件,但它不起作用,我怀疑在ngfor中创建并显示一个新组件,而不是数组中的那个,因为我确实看到新组件被创建但是使用默认值而不是传递给它们的当前值,我做错了什么？
HTML:
<div #visualTextDiv class = "visual_text" [ngStyle]=setStyles()>
<div *ngFor="let lineCounter of visualDivArray">
<app-visual-text-div></app-visual-text-div>
</div>
</div>
打字稿:
if(this.visualDivArray.length < currentDivIndex+1){
let newv = new VisualTextDivComponent()
this.visualDivArray.push(newv);
console.log("creating new " + this.visualDivArray.length);
}
this.visualDivArray[currentDivIndex].setData(textValue);
我需要在以下模板中对组件进行动态排序
<div class="orderList">
<componentA></componentA>
<componentB></componentB>
<componentC></componentC>
</div>
像这样的对象
orders: {
componentA: 2,
componentB: 3,
componentC: 1
}
所以我希望首先看到组件C，然后是组件A，最后是组件B？
备注：组件多于三个
我试图实现这样的事情:我有一个名为的模型类ObjectTypeA,ObjectTypeB和ObjectTypeC.还有一个工厂ComponentFactory,它根据传入的对象类型将创建不同的组件:
ComponentFactory.ts
export interface ComponentFactoryInterface {
static CreateComponent(obj: CommonSuperObject)
}
@Injectable()
export class ComponentFactory {
public static CreateComponent(obj: CommonSuperObject){
if (obj instanceof ObjectTypeA){
return ObjectComponentA()
}else if (obj instanceof ObjectTypeB){
return ObjectComponentB()
}
}
}
在模板中,我想做这样的事情:
main_template.html
<components>
<component *ngFor="#obj in objects">
<!-- insert custom component template here -->
</component>
</components>
如何动态插入关联的组件？
我可以做这样的事情(不是我喜欢的做法):
<components>
<!-- loop over component models -->
<custom-component-a *ngIf="models[i] instanceof ObjectTypeA">
</custom-component-a>
<custom-component-b *ngIf="models[i] instanceof ObjectTypeB">
</custom-component-b>
</components>
但在许多层面上,这对我来说似乎是非常错误的(如果我添加另一个组件类型,我将不得不修改此代码和工厂代码). …
如何将动态名称设置为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创建组件相比,似乎有太多工作要做.如果我找不到其他解决方案,我会深入研究一下......