Angular 从组件到组件的角度重用特性

我从Angular开始，做了教程，试图掌握概念，但我被一个看似简单的问题困住了。我试着用谷歌搜索，但我无法解决这个问题

在Angular 5中，如何在组件之间重复使用属性（此处为标题）？ 假设我在

app.component.ts

中定义了属性

title

，我希望最终在

login.component.html

中重用该属性

应用程序模块.ts

@NgModule({
  imports: [
    AppRoutingModule
  ],

  declarations: [
    AppComponent,
    LoginComponent,
  ],

  providers:[
    // services
  ],

  bootstrap: [AppComponent]
})

export class AppModule {}

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

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

@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 ?
}

应用程序组件.ts

@NgModule({
  imports: [
    AppRoutingModule
  ],

  declarations: [
    AppComponent,
    LoginComponent,
  ],

  providers:[
    // services
  ],

  bootstrap: [AppComponent]
})

export class AppModule {}

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

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

@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 -->

{{title}

---

您可以建议如何处理此问题吗？

您可以通过

@Input（）

/

@Output（）

或通过共享的

服务
在Angular wither中传递数据

如果将数据从父组件传递到子组件，则建议使用@Inout/@Output（尽管可以用相同的方式将数据发送到更深层）

如果您将数据传递得更深，建议使用服务。在你的情况下，似乎你通过它更深。因此，您要做的是创建一个新的
custom service.service.ts
文件，将其添加到
app.module.ts
中的providers数组中（使其成为整个应用程序的单例），将此服务注入所有通信组件。在服务中存储属性-
标题：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;
}