angular - 将服务变量插入Angular组件的正确方法是什么

Question

在组件的模板中使用服务变量（如下面的代码）是个好主意吗？问题是，当我尝试像这样在组件本身中定义这个变量时：usersList = this.service.arr然后在这样的模板中使用：ngFor = let item of usersList。如果没有一些额外的步骤，它就无法工作——例如，使用 Subject 。

@Injectable()
export class SomeService {
    arr: SomeObject[];

    constructor(private http: HttpClient) { }

    getUsers() {
        this.http.get('someUrl')
            .subscribe(
                res => arr as SomeObject[])
    };
}

@Component({
    selector: 'app-smth',
    templateUrl: template: `
    <ul *ngFor = "let item of service.arr">
    <li>Name: {{item.name}}</li>
  </ul>  `
})

export class CategoryComponent implements OnInit, OnChanges {
    constructor(private service: SomeService) { }

标签： angulartypescript

Answer 1

您应该从服务返回一个 Observable 并订阅组件或使用组件async模板中的管道。

async以管道为例

服务：

@Injectable()
export class SomeService {

    constructor(private http: HttpClient) { }

    getUsers(): Observable<SomeObj[]> {
        return this.http.get('someUrl');
    }
}

零件：

@Component({
    selector: 'app-smth',
    templateUrl: template: `
    <ul *ngFor = "let item of data$ | async">
    <li>Name: {{item.name}}</li>
  </ul>`
})
export class CategoryComponent implements OnInit, OnChanges {
    data$: Observable<SomeObj[]> = this.service.getUsers();

    constructor(private service: SomeService) { }
}