我有一个父组件,它在点击链接时打开一个新组件,这个新组件应该有一个关闭按钮,在关闭时向父发送一个关闭消息并销毁自己.

我们可以使用ngOnDestroy方法发送结束消息,但是如何调用子组件的销毁.

<parent>
    <child></child> //child to be opened on click but close 
                    //event should be inside the child componenet
</parent>

如果我在这里遇到一些概念错误,请纠正我.谢谢

我有一个"仪表板",可以加载已配置的元素.仪表板模板具有以下内容:

  <div class="dash-container" [ngGrid]="gridConfig">
    <div *ngFor="let box of boxes; let i = index"
       [(ngGridItem)]="box.config"
       (onItemChange)="updateItem(i, $event)"
       (onResize)="onResize(i, $event)"
       (onDrag)="onDrag(i, $event)"
       (onDragStop)="onDragStop(i,$event)"
       [ngClass]="box.class"
     >
      <div class="handle"><h4>{{box.title}}</h4></div>
      <div [innerHTML]= "box.content"></div>
    </div>
  </div>

现在<div [innerHTML]= "box.content"></div>不行,因为非标准元素被消毒了.运行最新的Angular 2.4.6(RC 6).

我看一下我能找到的动态组件的例子 - 但我看到的只是他们只是将组件添加到当前组件 - 但我需要它们在一个非常特定的div中,如上例所示.

ComponentFactoryResolver通常与...一起使用@ViewChild.但我不能在一个循环中这样做:

ngAfterViewInit() {
    const dashWidgetsConf = this.widgetConfigs();
    for (var i = 0; i < dashWidgetsConf.length; i++) {
      const conf = dashWidgetsConf[i];

      @ViewChild(conf.id, {read: ViewContainerRef}) var widgetTarget: ViewContainerRef;

      var widgetComponent = this.componentFactoryResolver.resolveComponentFactory(UnitsComponent);
      widgetTarget.createComponent(widgetComponent);
    }
  }

@viewchild给'装饰者在这里无效'.如何从conf列表中加载组件(在循环中)并将它们添加到组件中的特定div(divs …

原始标题:无法在Angular 2中初始化动态追加(HTML)组件

我已经创建了一个指令,在初始化时将一个模态附加到正文.当单击一个按钮(带有指令注入其中)时,这个模态会激活.但我希望这个模态的内容是另一个组件(实际上我希望模态是组件).似乎我无法初始化组件.

这是我所做的一切:

http://plnkr.co/edit/vEFCnVjGvMiJqb2Meprr?p=preview

我正在尝试将my-comp作为我的组件的模板

 '<div class="modal-body" #theBody>' 
            + '<my-comp></my-comp>' + 
 '</div>

这是一个关于如何使用Angular 2以"正确"方式实现所需功能的概念性问题.

我的应用程序有一个导航菜单,一个工具栏和一个内容区域.后者包含主要内容<router-outlet>并显示不同的视图,如列表和详细信息.

我想要实现的是工具栏显示不同的组件,具体取决于在内容区域中呈现的组件/视图.例如,列表组件需要工具栏中的搜索控件,而详细信息组件需要保存按钮.

A)我的第一次尝试是<router-outlet>在工具栏中添加另一个(命名)并根据静态路径显示工具栏组件.这有什么不妥之处:

1. 根据我的口味,静态内容工具栏关系过于松散.
2. 该关系在URL中可见(并且可更改).
3. 即使用户导航,工具栏插座也会保留此路径.

B)我的第二次尝试是命令性地导航到主视图组件中的工具栏组件(也使用命名的工具栏插座),ngOnInit它更紧密地耦合它.什么闻起来很糟糕:

1. A2
2. A3,为了防止这种情况我可以"清除"工具栏插座ngOnDestroy,但我还没有发现如何.

C)给路由器一个最后的机会,因为我发现这种工作:

const ROUTES: Routes = [
    {path: "buildings", children: [
        {path: "", component: BuildingListComponent, pathMatch: "full", outlet: "primary"},
        {path: "", component: BuildingListToolbarComponent, pathMatch: "full", outlet: "toolbar"},
        {path: ":id", component: BuildingDashboardComponent, outlet: "primary"}
    ]}
];

这个想法是路由器会选择每个插座的匹配路径.但是(不,它可能很容易)不幸的是,这不起作用:

const ROUTES: Routes = [
    {path: "buildings", children: [
        {path: "list", component: BuildingListComponent, pathMatch: "full", outlet: "primary"},
        {path: "list", component: BuildingListToolbarComponent, …

我想创建一个组件myApp,它将在控件的模板中嵌入HTML的属性.但是,某些HTML可能包含其他组件选择器.

import {InfoComponent} from ...
@Component({
    selector: 'myApp',
    template: `<div [innerHTML]='hData'></div>
               <myInfo></myInfo>`,
    directives: [InfoComponent]
})
export class AppComponent {
   hData = "<myInfo></myInfo>";
}

@Component({
   selector: 'myInfo',
   template: "<b>This is a test</b>"
})
export class InfoComponent {
}

在这个例子中,我希望看到This is a test显示两次.但是,似乎Angular2引擎没有注意到Component的选择器已被注入,因此模板永远不会为<myInfo></myInfo>通过绑定添加的选择器生成.

你可以在这里看到一个演示.

有没有办法让Angular2解析选择器的方式与在模板中显式添加的选择器相同？

如果调用show(),我打算在DOM中添加一个动态组件.我知道有一个使用ngIf或[hidden]的解决方案来隐藏它并将其用作指令,但我不是这个解决方案的粉丝,因为我不想在我的HTML中声明它.

  import {Component} from 'angular2/core';
  import {InfoData} from '../../model/InfoData';

  @Component({
    selector: 'Info',
    templateUrl: './components/pipes&parts/info.html',
    styleUrls: ['./components/pipes&parts/info.css']
  })

  export class Info{
    infoData: InfoData;

    public show(infoData: InfoData) {
      this.infoData= infoData;
      document.body.appendChild(elemDiv); <----- Here?
    }
  }

然后我将其声明为提供者,因此我可以调用show().

  import {Component} from 'angular2/core';
  import {Info} from './components/pipes&parts/Info';

  @Component({
    selector: 'Admin',
    templateUrl: './Admin.html',
    styleUrls: ['./Admin.css'],
    directives: [Info],
    providers: [Info]
  })

  export class Admin {
    constructor(private info: Info) {
    info.show(); <---- append the Info Element to DOM
  }

我试图从我的输入绑定一个字符串数组,所以在html文件中我写了这个:

<div *ngFor="let word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in]"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

但是这没有按预期工作,因为当我记录单词变量时,它显示在我的Component类中初始化的空数组.另外,我应该记录来自另一个组件的变量应该是我的问题的问题.我有两个组成部分:

• 包含查询组件数组的表单组件.
• 具有单词字符串数组的查询子组件.

因此,单词变量被声明到查询组件中,但我通过表单组件记录此变量,如下所示:

console.log(JSON.stringify(this.queries));

虽然查询是表单组件中的Query数组:

queries:Query[] = [];

谢谢你的帮助!

我有一个包含节点的递归树结构,每个节点都有一个'htmlStringContent'属性.当我使用嵌套的'node'组件显示树并尝试呈现我使用的html内容时:

<div [innerHtml]="node.htmlStringContent"></div>

HTML正确显示但对于以下元素:

<a (click)="function()">click me</a>

(单击)功能不起作用.我知道这已经发布了,但是最近我发现了大量的更新,我无法找到任何解决方案.这个答案让我相信我应该使用ngComponentOutlet指令,但我不知道如何...

如何获得角度来绑定此点击功能？

编辑:我被告知使用ComponentFactoryResolver,但无法看到我如何使用它来正确显示HTML.有人能提供进一步的帮助吗

Edit2:我在[innerHtml]上显示之前通过清理管道解析'htmlStringContent'

transform(v: string) : SafeHtml {
  return this._sanitizer.bypassSecurityTrustHtml(v); 
} 

编辑3:基本上这个问题是询问是否尽可能在角度2 /离子2中的对象上显示HTML,同时在其上保留(点击)功能.我也愿意接受解决方法.

我知道有很多类似的问题,几乎所有问题都以DynamicComponentLoader答案结束,但我认为下面描述的用例是如此简单和常见(IMO),Angular 2的解决方案应该是直截了当的.

示例用例

我有一系列新闻项目,其属性type描述了它是什么类型的项目.

var items = [
  { id: 1, type: 'text', data: {} },
  { id: 2, type: 'text', data: {} },
  { id: 3, type: 'text-two-columns', data: {} },
  { id: 4, type: 'image-text', data: {} },
  { id: 5, type: 'image', data: {} },
  { id: 6, type: 'twitter', data: {} },
  { id: 7, type: 'text', data: {} }
]

每种不同的类型都有不同的view,完全不同的逻辑.换句话说 - 每个type都有自己的angular2 Component.

所以我试图实现的抽象代码是:

<div *ngFor="let item …

我正在为组件库创建文档.我想要1个html字符串,它可以生成页面上的组件和文档.

我想要的是:

是)我有的:

当我检查HTML时,我的按钮标签不存在.当我使用innerHTML时,它们被剥离了.

我的组件代码:

private flatButtons = `<div class="button-wrapper">
      <my-button [type]="'default'" [raised]="false">Default</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'primary'" [raised]="false">Primary</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'success'" [raised]="false">Success</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'info'" [raised]="false">Info</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'warning'" [raised]="false">Warning</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'danger'" [raised]="false">Danger</my-button>
    </div>`

constructor() {}

getCode() {
    return html_beautify(this.flatButtons, this.options)
}

我的HTML模板:

<div class="row">
<div class="col-sm-6 col-xs-12">
  <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel">
    <div id="flatButtons" [innerHTML]="getCode()">
    </div>
  </mi-card>
</div>
<div class="col-sm-6 col-xs-12">
  <pre>{{getCode()}}</pre>
</div>