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) { }

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) { }
}

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

1 个答案: