小编And*_*y88的帖子

我已将 Angular 从 更新为11至12，并将我的 中的所有软件包更新为最新版本package.json：

    {
      "name": "poc-architecture-angular",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve --host 0.0.0.0  --port 4200",
        "build": "NODE_ENV=production ng build --prod",
        "build:dev": "NODE_ENV=production ng build --source-map=true --prod",
        "build:local": "ng build --watch --output-path /usr/share/nginx/html && tar -zcvf archive.tar.gz dist/prod/*",
        "test": "ng test",
        "test:coverage": "ng test --no-watch --code-coverage --browsers ChromeHeadlessNoSandbox",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "stylelint": "stylelint --fix \"src/**/*.scss\" --config .stylelintrc.json",
        "stylelint:diff": "stylelint \"src/**/*scss\" --config .stylelintrc.json",
        "format": "prettier --write \"src/app/**/*.{ts,html,scss}\"", …

我有一个 Angular 应用程序，我已将应用程序更新到版本 11。我有节点 v15.10.0 和 npm v7.6.3。我的项目中还有故事书。这是我的 package.json：

    {
      "name": "my-project",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve --host 0.0.0.0 --port 4200",
        "start:webapp": "ng serve --host 0.0.0.0 --disable-host-check --ssl --ssl-key ~/local/ssl/server.key  --ssl-cert ~/local/ssl/server.crt --port 4200",
        "build": "NODE_ENV=production ng build --prod",
        "build:local": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "preinstall": "npx npm-force-resolutions",
        "stylelint": "stylelint --fix \"src/**/*.scss\" --config .stylelintrc.json",
        "stylelint:diff": "stylelint \"src/**/*scss\" --config .stylelintrc.json",
        "format": "prettier --write \"src/app/**/*.{ts,html,scss}\"",
        "format:diff": "prettier --list-different \"src/app/**/*.{ts,html,scss}\"",
        "analize": "ng build …

我有一个通用接口和两个接口“Person”和“Employee”，它们扩展了第一个接口：

    export interface Common {
        id: number,
        name: string
      }

      export interface Person extends Common {
        age: number;
      }

      export interface Employee extends Common {
        role: string;
      }

我需要一个与这些接口混合的数组，例如：

listOfPeople: Person[] | Employee[] = [{id: 1, name: 'George', age: 4}, {id: 2, name: 'Micheal', role: 'software developer'}];

但这样我就得到了一个错误。获得我想要的结果的正确方法是什么？

我有一个动态创建的 modalComponent。

<div class="modal">
  <div class="modal-body">
    Test
  </div>

  <div class="modal-footer">
    <button (click)="callbackFunction()">success</button>
    <button>abort</button>
 </div>
</div>

该组件有一个输入回调函数，我想从父组件调用该函数。

import {
  Component,
  Input,
  OnInit,
  QueryList,
  ViewChildren
} from "@angular/core";
import { ModalService } from "../modal.service";

@Component({
  selector: "app-modal",
  templateUrl: "./modal.component.html",
  styleUrls: ["./modal.component.css"]
})
export class ModalComponent implements OnInit {
  @Input() callbackFunction: () => void;

  constructor(private modalService: ModalService) {}

  ngOnInit() {}
}

之后我创建了一个服务：

import {
  ApplicationRef,
  ComponentFactoryResolver,
  ComponentRef,
  Injectable,
  Injector
} from "@angular/core";

import { ModalComponent } from "./modal/modal.component";

@Injectable()
export class ModalService { …