Как создать общую многоразовую модель для всех компонентов в Angular?

Question

Я реализую шаблон angular и хочу реализовать общую модель многократного использования (всплывающее окно). Я использую bootstrap. У меня нет глубоких знаний о angular. App.component. html

  <button class="btn btn-primary" routerLink="about">about</button>
  <button class="btn btn-primary" routerLink="contact">contact</button>

About.component. html

<div class="row text-center">
    <h1>Welcome on about</h1>
    <button class="btn btn-primary">Model</button>
</div>

contact.component . html

<div class="row text-center">
    <h1>Welcome on contact</h1>
    <button class="btn btn-primary">Model</button>
</div>

contact.component.ts

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

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Я хочу реализовать общую модель для обоих компонентов (about, contact) .

Answer 1

Создайте файл модели, скажем, Common-Model.ts, и поместите его в папку модели. После этого напишите модель.

export class contactModel {
    contact : String;
    phone : int;
}

что-то похожее на это в соответствии с вашими требованиями. После этого вы можете импортировать этот Common-Model.ts файл модели в свой contact.component.ts файл и использовать его по своему усмотрению.