Angular 5：如何在*ngIf指令中使用抽象函数？

嘿，我来帮你搞定这个问题！首先得明确：抽象类本身不能直接实例化，所以你得先创建继承Item抽象类的子类，实现那些抽象方法，之后才能在组件模板的*ngIf里调用这些方法。下面是具体步骤：

1. 实现抽象类的子类 #

你需要为每种类型的Item创建子类，实现isText()、isLink()、isImage()这些抽象方法，每个方法返回对应的布尔值：

// text-item.ts
export class TextItem extends Item {
  constructor(name: string) {
    super(name, '', '');
  }

  isText(): boolean {
    return true;
  }

  isLink(): boolean {
    return false;
  }

  isImage(): boolean {
    return false;
  }
}

// link-item.ts
export class LinkItem extends Item {
  constructor(name: string, url: string) {
    super(name, url, '');
  }

  isText(): boolean {
    return false;
  }

  isLink(): boolean {
    return true;
  }

  isImage(): boolean {
    return false;
  }
}

// image-item.ts
export class ImageItem extends Item {
  constructor(name: string, image: string) {
    super(name, '', image);
  }

  isText(): boolean {
    return false;
  }

  isLink(): boolean {
    return false;
  }

  isImage(): boolean {
    return true;
  }
}

2. 在组件中使用子类实例 #

在你的Angular组件里，创建Item类型的数组，填充不同子类的实例：

// your-component.component.ts
import { Component } from '@angular/core';
import { Item } from './item';
import { TextItem } from './text-item';
import { LinkItem } from './link-item';
import { ImageItem } from './image-item';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  items: Item[] = [
    new TextItem('这是一段文本'),
    new LinkItem('Angular官网', 'https://angular.io'),
    new ImageItem('示例图片', 'https://example.com/image.jpg')
  ];
}

3. 在模板中用*ngIf调用抽象方法 #

现在你可以在组件模板里，通过*ngIf调用这些实例的抽象方法，根据类型渲染不同内容：

<!-- your-component.component.html -->
<div *ngFor="let item of items">
  <!-- 渲染文本 -->
  <p *ngIf="item.isText()">
    {{ item.Name }}
  </p>

  <!-- 渲染链接 -->
  <a *ngIf="item.isLink()" [href]="item.Url">
    {{ item.Name }}
  </a>

  <!-- 渲染图片 -->
  <img *ngIf="item.isImage()" [src]="item.Image" [alt]="item.Name">
</div>

注意事项 #

• 确保所有子类都正确实现了抽象类的所有抽象方法，否则TypeScript会报错。
• Angular的变更检测会在每次触发时调用这些方法，所以尽量让这些方法保持简单（比如只返回固定布尔值），避免复杂逻辑影响性能。
• 不要直接实例化抽象类Item，必须使用它的子类实例。

内容的提问来源于stack exchange，提问作者George Hulpoi