Question

我是Angular2和前端工程师的初学者，当我想为自学习创建一些动态组件时，我遇到了一个奇怪的问题。

目前我写了一个子组件，其中包含一个大组件。我不知道细节，一些参数需要通过大的。我写了一些HTML，如下所示：

<div class="wrapper" [style.width]="width" [style.height]="height">
  <div class="tooltip" [style.margin-left]="width">
    I am a tooltip
  </div>
  <div class="figcaption" [style.width]="width" [style.margin-top]="height">
    <div class="text">
      <h2>Create Contract</h2>
    </div>
    <div class="button" [style.margin-left]="width"><i class="fa fa-file fa-1g"></i>
    </div>
  </div>
</div>

并输入以下脚本：

import {
  Component, Input, OnInit
}
from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'block',
  templateUrl: 'block.component.html',
  styleUrls: ['block.component.css'],
})
export class BlockComponent implements OnInit {
  @Input() key: string;

  width: string;
  height: string;

  constructor() {}

  ngOnInit() {
    let info = document.getElementById(this.key);
    let style = window.getComputedStyle(info, null);

    this.width = style.getPropertyValue('width');
    this.height = style.getPropertyValue('height');
  }
}

我的索引页面如下：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>LiveLeasing</title>
  <base href="/">{{#unless environment.production}}
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  {{/unless}}
  <script src="https://use.fontawesome.com/62fa32001b.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
</head>
<base href="/">

<body>
  <app-root>Loading...</app-root>



  {{#each scripts.polyfills}}
  <script src="{{.}}"></script>
  {{/each}}
  <script>
    System.import('system-config.js').then(function() {
      System.import('main');
    }).catch(console.error.bind(console));
  </script>



</body>

</html>

然后发生了一些奇怪的事情。当我连接互联网时，所有代码完全不起作用，因为ngOnInit()永远不会被触发。但如果我断开互联网。一切看起来都很好，每次刷新都会触发ngOnInit()。有人可以帮忙吗？

当我连接互联网时，不会调用ngOnInit

0 个答案: