Question

无论如何要改变这个：

<div>Some text here</div>

要：

<tr>Some text here</tr>

动态地将标签DIV标签更改为TR标签？基本上替换标签？

Answer 1

您可以创建自定义结构指令来执行此操作。

Online demo here

<强>更换-tag.directive.ts

import { Directive, Input, TemplateRef, ViewContainerRef, ElementRef, AfterViewChecked } from '@angular/core';

@Directive({
  selector: '[replaceTag]'
})
export class ReplaceTagDirective implements AfterViewChecked {
  constructor(
    private templateRef: TemplateRef<any>,
    private vcf: ViewContainerRef
  ) { }
  private _tag: string;
  private _needUpdate: boolean = false;

  @Input('replaceTag')
  set tag(t: string): void {
    this._tag = t;
    this._needUpdate = true;
    this.vcf.clear();
    let template = this.templateRef.elementRef.nativeElement.nextElementSibling;
    if (template) {
      this.templateRef.elementRef.nativeElement.parentNode.removeChild(template);
    }
    this.vcf.createEmbeddedView(this.templateRef);
  }

  ngAfterViewChecked() {
    if (this._needUpdate) {
      this._updateTemplate();
      this._needUpdate = false;
    }
  }

  private _updateTemplate() {
    let template = this.templateRef.elementRef.nativeElement.nextElementSibling;
    if (template) {
      let r = document.createElement(this._tag);
      r.innerHTML = template.innerHTML;
      this.templateRef.elementRef.nativeElement.parentNode.replaceChild(r, template);
    }
  }
}

<强> app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    App
    <span *replaceTag="tag">
      <strong>content {{ tag }} </strong>
      <em>{{ message }}</em>
    </span>
  `
})
export class AppComponent implements OnInit {
  tag: string = 'div';
  timeOut: number = 2;

  get message(): string {
    return this.timeOut? `<- this tag will change after ${this.timeOut} seconds.` : 'done';
  }

  ngOnInit() {
    setTimeout(() => {
      this.tag = 'h2';
      this.timeOut = 4;
    }, 2000);

    setTimeout(() => {
      this.tag = 'sub';
      this.timeOut = 0;
    }, 4000);
  }
}

Answer 2

这是避免重复的另一种方法。我需要根据某些条件使用不同的标签：

创建两个标签将使用的模板：

<ng-template #tagTemplate>
      <h1>Hello and Hi</h1>
      <p>Bye</p>
</ng-template>

定义两个标记并使用ngIf。标签的内容将是上面创建的模板。

<div class="post-widget" *ngIf="data">
    <ng-container *ngTemplateOutlet="tagTemplate;"></ng-container>
</div>

<ion-content class="post-widget" *ngIf="!data">
    <ng-container *ngTemplateOutlet="tagTemplate;"></ng-container>
</ion-content>

Answer 3

你可以在每一个上使用* ngIf

<div *ngIf="someFunction()">Some text here</div>
<tr *ngIf="someFunction()">Some text here</tr>

Answer 4

试试这个，你在控制器中管理（bool）show_div。

//Js
$scope.show_div = true;

<!--Html-->
<div ng-if="show_div">Some text here</div>
<tr ng-if="!show_div">Some text here</tr>

动态更改标签？ Angular 2

4 个答案: