相关疑难解决方法(0)

我有一个包含节点的递归树结构,每个节点都有一个'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,同时在其上保留(点击)功能.我也愿意接受解决方法.

我正在尝试在最终版本2.0.0中动态加载组件.

使用RC5我使用以下代码加载:

创建一个指令来加载控件:

import {
  CheckboxComponent, CheckboxListComponent,DatePickerComponent
} from '../components/';

@Directive({
      selector: '[ctrl-factory]'
    })
    export class ControlFactoryDirective implements OnChanges {
      @Input() model: any;

      constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
      }

      create(cp) {
        this.resolver.resolveComponent(cp)
          .then(factory => {
            const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
            this.vcRef.createComponent(factory, 0, injector, []);
            let ch = this.vcRef.createComponent(factory, 0, injector, []).instance;
            ch.model = this.model;
        });
      }

      ngOnChanges() {
        if (!this.model) return;

        switch (this.model.type) {
          case 'checkbox':
            this.create(CheckboxComponent);
            break;
          case 'checkboxlist':
            this.create(CheckboxListComponent);
            break;
          case 'datepicker':
            this.create(DatePickerComponent);
            break;
          default:
            break; …

我正在为组件库创建文档.我想要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>

我想在另一个组件中创建一些动态组件，但不仅仅是一次，很多次。而且这个数字也是动态的。

所以我使用 ComponentFactoryResolver 创建组件，然后使用 ViewChild 动态注入该组件。正如我所说，问题是我需要在很多地方这样做，所以我需要使用 ViewChildren 来检索所有引用并注入组件（使用特定的输入数据）。

我有一个 plunker，我将问题减少到我需要的程度。我有一个组件，它传递了一个数据数组和要创建的组件的类型。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <my-parent [data]="rows" [inner]="component">
      </my-parent>
    </div>
  `
})
export class AppComponent { 

  rows = [
    { name: 'data1' },
    { name: 'data2' },
    { name: 'data3' },
    { name: 'data4' }
  ];

  component = ChildComponent;
}

在我的父级中，我为作为参数接收的数据中的每个元素显示一行，而且，我想在每一行下方显示另一行，该类型的组件也作为参数传递。

举个例子，最重要的是，我正在为一个组件做这件事，在那里我传递 name='TOTAL'。所以我使用 an<ng-container #entry>来检索引用并注入组件。

我尝试对动态参考进行相同的操作，但它不起作用。我创建了一个指令 Host 以便我可以使用具有特定 id 的 ViewChildren 检索它，但是当我尝试动态创建组件时，它不起作用。

这是代码

@Directive({
  selector: 'host'
})
export class Host {
  @Input() id: string;
}

@Component({
  selector: …

上下文 - 我正在尝试创建一个可以包含许多组件的自定义下拉列表.我可以通过<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 …

我感兴趣的是如何TemplateRef通过传递一个string例子来获得一个.

我不想通过组件html获取它,因为我只想将它保存在配置中以用于所有组件.我正在引用NgbDatePickerConfig可以在这里查看的ng-bootstrap :https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/datepicker-config.ts.

我正在寻找一种方法来从另一个组件的代码中实例化Angular2中的组件.与许多提出类似问题的人不同,我对动态编译新组件并不感兴趣,只是实例化并插入已存在于我的应用程序中的组件.

例如:

说我有两个组成部分:

仪表板item.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "dashboard-item",
    template: "Some dashboard item with functionality"
})
export class DashboardItemComponent {
    constructor() {}

    onInit() {}
}

dashboard.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "dashboard",
    template: "<h1>Dashboard!</h1><div #placeholder></div>"
})
export class DashboardComponent {
    constructor() {}

    onInit() {}
}

我正在寻找的是一种在DashboardComponent的onInit中创建DashboardItemComponent并将其添加到#placeholder div的方法.

有两点需要注意:

• 我需要能够使用子组件的输入/输出
• 我明确地没有谈论像这两个问题所描述的那样动态编译新组件:如何使用/创建动态模板来使用Angular 2.0编译动态组件？和Angular 2中的$ compile相当

这两个早期的问题提出了类似的问题,但他们的答案要么相当平淡,要么与Angular2的早期(beta)版本相关,而且似乎不再起作用.

• 如何实例化和渲染Angular2组件？
• 是否可以手动实例化角度2中的组件

我有一堆静态页面,使用各种组件放在HTML设计师喜欢的任何地方.例如,在WordPress网站的任何页面内.

虽然这里显示的示例组件是简单的面板,但实际上有各种组件,例如搜索,列表,编辑器,视图等......

目前,它们已在许多Wordpress站点上完成,其中每个页面都可以具有完全不同的布局.在过去,我们使用Angular 1.5,WP开发人员可以将我们的app标签放在身体附近,然后任何小部件(我们大约30个)可以在任何页面中放置1次或更多次.

组件可以重复使用,因此通过bootstrap []属性创建组件根组件没有意义,因为您只能在页面上使用一次根组件.如我的第二个例子所示.

技术1

这是第一次设置的截图和Plunker.请注意,我有4个区域,其中我放置了3个组件,组件1被重用.

这个例子是通过在单个根组件中布置组件来完成的,这对于我的Wordpress Pages具有完全不同的布局和组合要求的用例是不切实际的..

Plunkr

技术2

我尝试使用一种技术,其中每个窗口小部件作为根组件进行自举,基于此非自适应页面内的Bootstrapping Multiple Applications Sprinkling Angular 2组件.

但是当我使用这种技术时,小部件的第二个实例不会加载.AKA小工具1.

Plunkr

请参阅bootstrapping示例

技术2 - 还有其他问题

如果你已经引导了3个根组件,你必须使用它们全部,否则Angular会抛出你没有使用的根组件的错误.

Plunker

技术3

使用<ng-content></ng-content>似乎不起作用的根组件.

请参阅:具有ng-content的Angular2根组件

我试图在运行时将角度代码的*ngIf指令分配给模板.无法找到办法.view/templateref是一个选项吗？或者有一个不同的方式和一个更容易的方式.有可能首先吗？

更新:

代码有点混乱和混乱,所以避免它.但是这里是DOM代码的外观,以及为什么我需要动态添加内置结构指令.

<div>
  <input type="text" [value]="userProvidedValue">
  <textarea [value]="someDynamicDOMCodefromWYSIWYG">
    <!-- user provided provided code or dynamic code -->
  </textarea>
</div>
<div>
  <select *ngIf="fetchArraywithHttpFromuserProvidedValue">
    <option *ngFor="let val of fetchArraywithHttpFrom-userProvidedValue" value=""></option>
  </select>
</div>
<div>
  <ng-template>
    <!-- Some User provided code or dynamic code which might need to use *ngIf OR *ngFor -->
    <!-- The *ngIf OR *ngFor will be added dynamically based on a manipulator function which is decided from the value of fetchArraywithHttpFromuserProvidedValue -->
  </ng-template>
</div>

更新

我正在根据userProvidedValue值执行获取请求,并且获取请求的结果决定了fetchArraywithHttpFromuserProvidedValue …

我正在将我的Angular 2应用程序升级到beta.14到rc.4.

我在@ angular/core的DynamicComponentLoader上收到了一个弃用的警告.

要使用的新类是什么？有没有可用的例子？