Угловое повторное использование свойства от компонента к компоненту

Question

Я начинаю в Angular, делал урок, пытался понять концепции, но я застрял в том, что кажется простой проблемой. Пытался погуглить, но я не смог решить эту проблему.

В Angular 5, как бы вы повторно использовали свойство (здесь заголовок) от компонента к компоненту? Допустим, у меня есть свойство title, определенное в app.component.ts, которое я хочу в конце повторно использовать в login.compoment.html ??

app.module.ts

@NgModule({
  imports: [
    AppRoutingModule
  ],

  declarations: [
    AppComponent,
    LoginComponent,
  ],

  providers:[
    // services
  ],

  bootstrap: [AppComponent]
})

export class AppModule {}

app.component.ts

@Component({
  selector : 'app-root',
  template : `<router-outlet></router-outlet>`
})

export class AppComponent {
    title = 'A global title...';
}

login.component.ts

@Component({
    selector   : 's-login-pg',
    templateUrl: './login.component.html',
    styleUrls  : [ './login.scss'],
})
export class LoginComponent implements OnInit {
    // should title be referenced here? 
    // should the AppComponent be imported again, as they are already both defined in app module ?
}

login.component.html

<div>{{title}}</div> <!-- I want the title in app.component.ts to show up -->

Не могли бы вы посоветовать, как с этим обращаться?

Answer 1

Вы можете передавать данные в Angular через @Input() / @Output() или через общий Service.

@ Inout / @ Output рекомендуется, если вы передаете данные от родительских к дочерним компонентам (хотя вы можете отправить их глубже тем же способом).

Сервис рекомендуется, если вы передаете данные глубже. В вашем случае кажется, что вы проходите это глубже. Поэтому вы создаете новый файл custom-service.service.ts, добавляете его в массив провайдеров в app.module.ts (таким образом, он становится единым для всего приложения), внедряете эту службу во все компоненты, которые обмениваются данными. Хранить недвижимость в обслуживании - title: string.

В app.component.ts вы вводите эту услугу:

import {CustomService} from '...path'

title = 'My title';
constructor(private custService: CustomService) {
}

ngOnInit() {
  this.custService.title = this.title;
}

Теперь каждый компонент, который импортирует этот сервис, может получить доступ к свойству title и получить его значение:

import {CustomService} from '...path'

title: string;
constructor(private custService: CustomService) {
}

ngOnInit() {
  this.title = this.custService.title;
}