在Angular中,我们可以从一个服务中返回一个字符串并在多个组件中显示它。下面是一个示例解决方法:
首先,创建一个名为data.service.ts
的服务文件,其中包含一个用于返回字符串的方法。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
getString(): string {
return 'Hello, world!';
}
}
然后,在要显示字符串的组件中,注入并使用该服务。
import { Component, OnInit } from '@angular/core';
import { DataService } from '路径/data.service';
@Component({
selector: 'app-component1',
template: '{{ myString }}
'
})
export class Component1 implements OnInit {
myString: string;
constructor(private dataService: DataService) { }
ngOnInit() {
this.myString = this.dataService.getString();
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from '路径/data.service';
@Component({
selector: 'app-component2',
template: '{{ myString }}
'
})
export class Component2 implements OnInit {
myString: string;
constructor(private dataService: DataService) { }
ngOnInit() {
this.myString = this.dataService.getString();
}
}
最后,在模块文件中将服务添加到提供者数组中。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DataService } from '路径/data.service';
import { Component1 } from '路径/component1.component';
import { Component2 } from '路径/component2.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, Component1, Component2],
providers: [DataService], // 将服务添加到提供者数组中
bootstrap: [AppComponent]
})
export class AppModule { }
现在,Component1
和Component2
中的myString
变量将被赋值为来自DataService
的字符串,并可以在模板中显示。