Question

我是Ionic 2＆amp; 2的新手。 Angular 2和我想以编程方式添加按钮元素（在TypeScript文件中）。例如这种节点：

<button ion-button (click) = "self.showAlert('dynamic component')">DynamicComp</button>

我该怎么做？我尝试过ComponentOutlet，但它似乎不起作用....

有什么想法吗？

Answer 1

HTML：

<button ion-button (click) = "showAlert('dynamic component')">DynamicComp</button>

TS：

showAlert(message:string){
  alert(message);
}

这样的东西？

或者，如果您想通过TS向页面添加按钮 - > <>

HTML

<div [innerHtml]="innerHtmlVar"></div>

TS

innerHtmlVar:string = `<button ion-button (click)="self.alert('message')"></button>`

Answer 2

抱歉，您无法使用innerHtml插入任何角色调用代码，例如（单击）。 innerHtml只会显示html。实际上，默认情况下，它会消毒（即剥离）许多不安全的＆＃34; HTML，但有工作，你可以关闭消毒。但即使这样，你也不会像（点击）工作那样获得Angular代码。

如果您想在动态HTML中使用Angular行为，则需要使用ComponentOutlet。这是该项目的维护者编写的working plnkr，其中显示了在动态模板中使用自定义标记。关键部分在文件src / app.ts中：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <ng-container *componentOutlet="template; context: context"></ng-container>
    </div>
  `,
})
export class App {
  template = `<h2>Hello {{name}}</h2><page-component-test></page-component-test>`
  context = {
    name: 'Angular 2'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ComponentOutlet ],
  providers: [provideComponentOutletModule({
    declarations:[PageComponentTest]
  })],
  bootstrap: [ App ]
})
export class AppModule {}

使用Angular 2 / Ionic 2以编程方式添加HTML节点

2 个答案: