Google Chrome（Web 组件）中未解析 Angular 6 变量答案

【问题标题】：Angular 6 variable not resolved in Google Chrome (web component)Google Chrome（Web 组件）中未解析 Angular 6 变量
【发布时间】：2018-07-18 23:36:50
【问题描述】：

我使用 Angular 6 创建了一个从另一个应用程序集成的 Web 组件。在没有集成的情况下运行时，一切都适用于所有浏览器。当 Web 组件集成到其他应用程序中时，它可以在 IE、Safari、FF 上运行，但不能在 Chrome 上运行。

我设法找出了问题所在。第一次调用从我的后端获取一些配置数据。它应该被写入 var this.conf，但在 Chrome 中集成时不会发生这种情况。

我的组件：

public conf: any;

ngOnInit() {
  this.getData();
  console.log('Conf ngOnInit:', this.conf);
}

getData() {
  return this.partnerService.getData(this.name)
    .subscribe(
      (partner: any) => {
        console.log('partner: ', partner);
        this.conf = {
          id: partner['id'],
          name: partner['name']
        }
        console.log('conf:', this.conf);
     )
}

合作伙伴服务：

@Injectable()
export class PartnerService {

  constructor(public http: HttpClient) {
  }

  getData(name: string) {
    return this.http.get(environment.apiUrl + 'partners/conf/' + name)
      .map(resp => resp['partner']);
  }
}

我的看法：

<pre>Conf: {{ conf | json }}</pre>

控制台输出：

Conf ngOnInit: undefined
partner: {id: 1, name: "xxx", booking_name: "xxx", …}
conf: {id: 1, name: "xxx"}

视图中未解析 var。这可能是什么？

【问题讨论】：

标签： angular observable angular-elements

【解决方案1】：

在视图组件的构造函数中注入ChangeDetectorRef：

constructor(private cd: ChangeDetectorRef) {
}

在订阅函数中尝试：

this.conf = {};
this.conf.id = partner['id'];
this.conf.name = partner['name'];
this.cd.detectChanges();

这可能是时间/更改检测滴答的问题，仅在 Chrome 中显示。至少它会排除这个等式

【讨论】：

非常感谢 Dave，我不知道这个 ChangeDetectorRef :)
没问题:-) ngOnInit 在第一次设置数据时被调用，例如开始时为空。然后 Angular 在视图中设置这个值。然后它会运行检查以确保在设置视图后这些值没有更新。调用 detectChanges 可以让 Angular 知道您已经更改了某些内容，并且应该再次更新视图
这对我来说是终极解决方案：npmjs.com/package/elements-zone-strategy

【解决方案2】：

我认为你的问题是异步流程......当你在 nginit 中 consol.log 你的console.log('Conf ngOnInit:', this.conf); ..它还没有填充this.partnerService.getData(this.name) 的结果

试试这个>

public conf: any;

ngOnInit() {
      this.getData().subscribe(()=>{
     console.log('Conf ngOnInit:', this.conf);
});


}

getData() {
  return Observable.From(this.partnerService.getData(this.name)
    .subscribe(
      (partner: any) => {
        console.log('partner: ', partner);

        this.conf = {};
         this.conf.id = partner['id'];
          this.conf.name: partner['name'];
        console.log('conf:', this.conf);
     ))
}

【讨论】：

我知道由于异步，console.log 没有被填充，但是，由于数据绑定，我希望在设置 this.conf 变量时通知视图。对吗？
webcomponent 是什么意思？从您的示例中看不到涉及 web 组件。您是否使用 OnPush 更改检测策略？这可以解释问题。
否 2 路绑定不会更新值 .. 也许如果你使用 | $async 可以是 .. 或者像我的示例一样使用 subscribe .. 试试看！！

【解决方案3】：

编辑：新解决方案。试试：

<pre *ngIf="conf && conf.id && conf.name">Conf: {{ conf | json }}</pre>

【讨论】：

如果你把
```
Conf: {{ conf.id }}
```
是数据渲染？
不，很遗憾没有。
你应该在stackblizt这样的网站上做一段可运行的代码。那么我们可以帮助你，没有更多的代码，我不能做更多的事情：S
在这种情况下，一段可运行的代码几乎是不可能的。必须有一个创建 web 组件（并发布它）和一个使用这个发布的 web 组件。这应该怎么做？
我不知道您是否在渲染 html 时遇到问题，您可以尝试新的解决方案并告诉我是否适合您吗？