Chrome扩展+；angular cli:生成后的UI问题
我使用angular2 mdl布局编写了一个顶部有粘性标题的应用程序。 最近我重写了代码，以获得更灵活的自定义头 此后，当我构建应用程序（ng build）并将其作为未打包的扩展导入时，容器中的内容不再滚动。 尽管如此，该版本在一个“随意”的浏览器窗口中完美运行，即当应用程序托管在本地服务器上并在chrome中打开时 有什么问题吗 你可以用ng serve测试它。 然后将ng build命令生成的结果（dist文件夹）作为未打包的扩展加载。不要忘记将清单添加到文件夹中 守则本身： app.component.tsChrome扩展+；angular cli:生成后的UI问题,angular,google-chrome-extension,angular-cli,angular2-mdl,angular-mdl,Angular,Google Chrome Extension,Angular Cli,Angular2 Mdl,Angular Mdl,我使用angular2 mdl布局编写了一个顶部有粘性标题的应用程序。 最近我重写了代码，以获得更灵活的自定义头 此后，当我构建应用程序（ng build）并将其作为未打包的扩展导入时，容器中的内容不再滚动。 尽管如此，该版本在一个“随意”的浏览器窗口中完美运行，即当应用程序托管在本地服务器上并在chrome中打开时 有什么问题吗 你可以用ng serve测试它。 然后将ng build命令生成的结果（dist文件夹）作为未打包的扩展加载。不要忘记将清单添加到文件夹中 守则本身： app.co
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';
}
<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>
{{title}}
{{search}}
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
!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>
！doctype html>
镶嵌铬延伸
身体{
字体系列：“Roboto”，无衬线；
字体系列：“开放式Sans”，无衬线；
字体大小：100%；
高度：600px；
宽度：800px；
最小宽度：800px；
最大宽度：800px；
}
#地位{
/*避免状态文本过宽*/
空白：预处理；
/*文本溢出：省略号*/
/*溢出：隐藏*/
宽度：800px；
最小宽度：800px；
最大宽度：800px；
高度：600px；
}
加载。。。
min-width: 799px;
max-width: auto;
zone.run（（）=>{}）手动刷新UI状态
从我做的不同测试来看，这个问题似乎也导致了奇怪的滚动问题