我需要在angular2中实现向导.我有一个想法,但我不知道如何实施.这是我的想法:
我想创建一个component,它将是常见的组件.使用步骤和下一步/后退按钮.像这样
@Component({
selector: 'div',
providers: [],
template: ' <ul class="steps">
<li *ngFor="#step of steps; #i = index" class="steps-item">
<a href="#" class="steps-link" [attr.value]="step.value">{{step.name}}</a>
</li>
</ul>
<form >
<template></template>
<div>
<button type="button">Back</button>
<button type="submit">Submit</button>
</div>
</form>',
pipes: [TranslatePipe],
directives: []
})
export class WizardComponent {
steps: any;
constructor() {
this.steps = [
{'name': 'step 1', 'value': '1'},
{'name': 'step 2', 'value': '2'},
{'name': 'step 3', 'value': '3'}
];
}
}
然后每个组件都将扩展形式WizardComponent,重新使用所有HTMl和next/back功能.这样的事情.
对我来说任何解决方案,谢谢.
上下文 - 我正在尝试创建一个可以包含许多组件的自定义下拉列表.我可以通过<ng-content>标签完成这个,但我的团队固执地坚持他们不喜欢这样.他们希望能够几乎完全通过打字稿代码来实例化这个下拉列表.
我想我可以通过DynamicComponentLoader实现这一点,但不幸的是,我发现的所有好教程都使用了loadIntoLocation()函数,现在它已经消失了.所以我尝试使用loadAsRoot()函数,但它不起作用.
这是我正在尝试做的事情:
Main.ts:
import { Component } from '@angular/core';
import { MyDropdown } from './MyDropdown';
@Component({
selector: 'my-app',
template: `
<my-dropdown [contentModels]="dropdownContentModels"></my-dropdown>
`
})
export class Main {
dropdownContentModels: any[];
constructor() {
var someComponentModel = {selector: 'some-component', text: 'some'};
var otherComponentModel = {selector: 'other-component', text: 'other'};
this.dropdownContentModels = [someComponentModel, otherComponentModel];
}
}
MyDropdown.ts:
import { Component } from '@angular/core';
import { InjectComponent } from './InjectComponent';
@Component({
selector: 'my-dropdown',
inputs: ['contentModels'],
directives: [InjectComponent],
template: `
<div …我有一个名为"Node"的组件,它应该显示一个帖子,但我有一个以上的帖子类型,每个类型都有自己的视图(布局).
所以这个组件有一个ID参数,用于从服务获得post响应,然后根据post类型显示正确的布局.
例如:localhost/test_app/node/123123是id参数.
@Component({
selector: 'node',
directives: [Post, Project],
template: `
<post *ngIf="response.post.post_type == 'post'" content="response.post"></post>
<project *ngIf="response.post.post_type == 'project'" content="response.post"></project>
`,
})
export class Node{
id: number;
response: any;
constructor(private _param: RouteParams,
public service: Service
){
this.id = +_param.get('id');
}
ngOnInit(){
this.service.get(this.id).subscribe(
res=> this.response = res.json()
);
}
}
@Component({
selector: 'node',
directives: [Post, Project],
template: '<div #container></div>'
})
export class Node{
id: number;
response: any;
constructor(private _param: RouteParams,
public service: Service,
private loader:DynamicComponentLoader,
private …我从Angular 2开始,我有一个子组件"ChildCmp"初始化,在我需要通过点击销毁组件之后,让我们说:
@Component({
selector: 'main-cmp',
templateUrl: './main-cmp.html',
directives: [ChildCmp]
})
class MainCmp {
@ViewChild(ChildCmp)
childCmp: ChildCmp;
destroyChildClick(){
this.childCmp.destroy();
}
}
但是前面的代码没有运行,destroy()是未定义的,异常是:
TypeError:this.childCmp.destroy不是函数
我已经阅读了这个线程并且使用了ViewContainerRef.createComponent(),使用它创建的组件是"ComponentRef"的实例,但是childCmp没有"ComponentRef"实现.
我如何实现或注入destroy方法？
谢谢大家!
我正在寻找相当于2的角度 react-dom/server.renderToString
import { renderToString } from 'react-dom/server';
// Render the component to a string
const html = renderToString(
<App />
);
使用NodeJ将指令/组件转换为HTML的最简单的代码示例是什么？
我想应该可以使用其中一个包:
@ angular/compiler - v2.0.0-rc.2
@ angular/platform-server - v2.0.0-rc.2
正如在这个plunker中所看到的,我正在动态地向我的一个元素添加一个HTML,其归结为:
@Component({
selector: 'my-comp',
template: `<span [innerHTML]="link"></span>`,
}) export class MyComponent {
private linkContent = '<a routerLink="/my-route">GoTo Route</a>';
private link;
constructor(sanitizer: DomSanitizer) {
this.link = sanitizer.bypassSecurityTrustHtml(linkContent);
}
}
这导致<a routerLink="/my-route">GoTo Route</a>被添加到DOM中,但Angular routerLink对该元素的指令一无所知,也没有"绑定"它.因此,当您单击该链接时,它会导致完全重新加载并重新引导(在plunk中不起作用,它只给出404).
问题:如何告诉角度通过DOM(或其部分,甚至是单个元素)并在需要时执行组件初始化？
我希望能够从内部销毁我的组件.(不是来自父级,因为它是在多个区域动态创建的).
我从angular的api中读到他们有一个ComponentRef对象.我已经尝试将它包含在构造函数中,但它说它需要一个参数,我不知道该传递给它.
链接:https://angular.io/api/core/ComponentRef
如何在我的组件中使用ComponentRef来销毁它？
import { Component, ComponentRef, OnInit } '@angular/core';
export class MyComponent implements OnInit {
constructor(private ref: ComponentRef) {}
ngOnInit() {
this.ref.destroy()
}
}
我正在尝试创建一个表组件,它将根据列描述和原始数据构建一个表.
我能够毫无问题地创建基本功能,但我还希望能够覆盖单个单元格的默认呈现,以便能够显示自定义内容(例如,显示链接).
以与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.
在经历了很多头痛和搜索之后,我能够在这个回复中找到类似于我正在寻找的东西,即使它不是最漂亮的. …
在角度2中,是否可以手动实例化组件A,然后将其传递并在组件B的模板中渲染？
我知道这不是最好的解决方案,但我希望能够从JSON响应中动态加载组件,这些内容如下:
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1> {{component.title}} {{component.selector}}',
providers: [AppService],
directives: [ExampleComponent]
})
export class AppComponent implements OnInit {
component:{};
constructor(
private _appService: AppService) {
}
ngOnInit() {
this.component = this._appService.getComponent();
}
}
@Injectable()
export class AppService {
component = {
title: 'Example component',
selector: '<example></example>'
}
getComponent() {
return this.component;
}
}
@Component({
selector: 'example',
template: 'This a example component'
})
export class ExampleComponent {
}
如果我运行这个例子,我的输出是<example></example>但它实际上并没有呈现组件.我也尝试过使用[innerHtml]="component.selector",但这也行不通.有没有人有想法或建议？