Chrome 扩展 + angular-cli : UI 构建后的问题

Question

我使用 angular2 mdl 布局编写了一个顶部带有粘性 header 的应用程序。最近我重写了代码以获得更灵活的自定义header.

从那时起，当我构建应用程序 (ng build) 并将其作为解压扩展导入时，容器中的内容不再滚动。尽管如此，该构建在 'casual' 浏览器 window 中完美运行，即当应用程序托管在本地服务器上并在 chrome.

中打开时

可能是什么问题？

Here is the angular-cli project. 你可以用 ng serve 测试一下。然后将 ng build 命令生成的结果（dist 文件夹）加载为解压缩的扩展。不要忘记将清单添加到文件夹中。

And here is a plunker

代码本身：

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app title!';
  search = 'search';
}

app.component.html

  <div class="header-wrap" mdl-shadow="2">      
      <div class="header-title"> 
        <span class="header-title">{{title}}</span>
      </div>
      <div class="header-search-input">              
          <span class="header-search">{{search}}</span>
      </div>
  </div>

  <div class="container">
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
    <h6>test</h6>
    <br><br>
  </div>

index.html

!doctype html>
<html>
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>Mosaic Chrome Extension</title>
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-family: 'Open Sans', sans-serif;
      font-size: 100%;
      height: 600px;
      width: 800px;
      min-width: 800px;
      max-width: 800px;
    }
    #status {
      /* avoid an excessively wide status text */
      white-space: pre;
      /*text-overflow: ellipsis;*/
      /*overflow: hidden;   */
      width: 800px;
      min-width: 800px;
      max-width: 800px;      
      height: 600px;

    }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.deep_orange-indigo.min.css" />
  <!-- charts -->
  <app-root>Loading...</app-root>
</body>
</html>

Answer 1

经过多次纠结，Google Chrome 扩展似乎不喜欢最小和最大宽度参数。

将两者都设置为：

  min-width: 799px;
  max-width: auto;

成功了。去图吧。

编辑 6 月 17 日：后来我还遇到了 Angular Material 和 Mdl 组件的尴尬行为，这些组件没有或部分工作。经过进一步调查，似乎 Angular 区域已损坏，我需要通过调用 zone.run(() => {}); 手动刷新 UI 状态从我所做的不同测试来看，这个问题似乎也是导致奇怪的滚动问题的原因。

Chrome 扩展 + angular-cli : UI 构建后的问题

Chrome extension + angular-cli : UI issues after build

angular

google-chrome-extension

angular-cli

angular2-mdl

angular-mdl