要创建一个全局数组,其中包含字符串和图像,可以使用Angular的服务来实现。
首先,创建一个名为GlobalService
的服务,并在app.module.ts
中注册该服务。
// global.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class GlobalService {
globalArray: (string | string[] | object)[] = [
'String 1',
'String 2',
'String 3',
{
imagePath: 'path/to/image1.jpg',
caption: 'Image 1'
},
{
imagePath: 'path/to/image2.jpg',
caption: 'Image 2'
}
];
constructor() { }
}
接下来,在需要使用该全局数组的组件中,注入GlobalService
并使用它。
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { GlobalService } from './global.service';
@Component({
selector: 'app-root',
template: `
{{ item }}
`
})
export class AppComponent implements OnInit {
constructor(public globalService: GlobalService) {}
ngOnInit() {}
}
在上面的示例中,GlobalService
被注入到了AppComponent
中,并在模板中使用*ngFor
循环遍历globalArray
的每个元素。如果元素是字符串,则直接显示该字符串。如果元素是对象,则显示图像,并使用对象的属性来设置图像的路径和标题。
请记得在app.module.ts
中将GlobalService
添加到providers
数组中,以便在整个应用程序中可以使用该服务。
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GlobalService } from './global.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [GlobalService],
bootstrap: [AppComponent]
})
export class AppModule { }
这样就创建了一个全局数组,其中包含了字符串和图像,并且可以在整个应用程序中使用它。