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

您可以通过@Input() / @Output()或通过共享Service在Angular wither中传递数据。

如果您将数据从父组件传递到子组件，建议使用

@Inout / @Output （尽管您可以以相同的方式更深入地发送数据）。

如果您更深入地传递数据，建议

服务。在你的情况下，你似乎更深入地传递它。所以你要做的是创建一个新的custom-service.service.ts文件，将其添加到app.module.ts中的providers数组（因此它成为整个应用程序的Singleton），将此服务注入到所有通信的组件中。将物业存放在服务中 - 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;
}

从组件到组件

1 个答案: