Импортировать абзац из другого файла в Angular 8

Question

У меня проблема.Я хочу использовать объект из другого компонента в файле ability.component.html.Кажется, что последний абзац (h1) не работает.Почему это так?

---

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: `./app.component.html`,
    styles: []
})
export class AppComponent {     
    constructor(){ }
}

app.component.html

<p>app.component work</p>
<app-baza></app-baza>

model.ts

export interface Human {
    name: string,
    wzrost: number,
    age: number,
    pozycja: PozycjaNaBoisku,
}

export enum PozycjaNaBoisku {
    rozgrywajacy,
    skrzydlowy,
    center,
}

baza.component.ts

import { Human, PozycjaNaBoisku } from '../model'

@Component({
    selector: 'app-baza',
    templateUrl: './baza.component.html',
    styleUrls: ['./baza.component.css']
})
export class BazaComponent implements OnInit {
    humans: Human[] = [
      {
          name: "Jordan",
          wzrost: 199,
          age: 23,
          pozycja: PozycjaNaBoisku.skrzydlowy,
      },
      {
          name: "Shaq",
          wzrost: 218,
          age: 34,
          pozycja: PozycjaNaBoisku.center,
      }]

      human: Human = this.humans[0];

      constructor() { }

      ngOnInit() {}
}

baza.component.html

<p>{{human.name}}</p>   
<app-ability></app-ability>

able.component.ts

import { Human, PozycjaNaBoisku } from '../model';

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

    @Input() human: Human;

    nameColor: string = "blue";

    PozycjaNaBoisku = PozycjaNaBoisku;

    constructor() { }

    ngOnInit() {}  
}

able.component.html

<h1>{{humans[1].name}}</h1>
<p>ability works</p>

а тут h1 не работает.Почему?

Answer 1

Это потому, что вы ничего не отправляете в качестве ввода.Аааа, вам действительно нужно прочитать любой пример взаимодействия с угловым компонентом (просто найдите «Угловой ввод», и вы получите результаты типа this ).

Для вашего конкретного случая вам необходимо сделать следующее:

baza.component.html

<p>{{human.name}}</p>   
<app-ability [humans]="humans"></app-ability>

ability.component.ts

import { Human, PozycjaNaBoisku } from '../model';

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

    @Input() humans: Human[];

    nameColor: string = "blue";

    PozycjaNaBoisku = PozycjaNaBoisku;

    constructor() { }

    ngOnInit() {}  
}

Так и должно быть.Помните, всегда проводите исследования, это довольно распространенная вещь в Angular, и ответ можно найти где угодно ...

Answer 2

DawidR, я думаю, что ваша идея состоит в том, чтобы анализировать данные из компонента базы в компонент способности. Есть несколько способов сделать это, перейдя по ссылке, чтобы лучше понять,

https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb