Chrome擴展+ angular-cli：構建後的用戶界面問題

我使用angular2 mdl佈局編寫了一個頂部有粘性標題的應用。最近我重寫了代碼以獲得更靈活的自定義標題。Chrome擴展+ angular-cli：構建後的用戶界面問題

從那時起，當我構建應用程序（ng版本）並將其作爲解壓縮擴展導入時，我的容器中的內容不再滾動。儘管如此，這個構建在一個「隨便的」瀏覽器窗口中完美地工作，即當應用程序託管在本地服務器上並以鉻打開時。

可能是什麼問題？

Here is the angular-cli project.你可以用ng服務來測試它。然後加載由ng build命令產生的結果（dist文件夾）作爲未打包的擴展名。不要忘記將清單添加到文件夾中。

代碼本身：

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>

來源

2017-02-23 Stanislasdrg

經過多次拉動，看起來谷歌瀏覽器擴展程序不喜歡最大寬度參數最小&。

都設置爲：

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

的伎倆。去搞清楚。

編輯6月17日：我也遇到過來自Angular Material和Mdl組件的尷尬行爲，這些行爲沒有或部分工作。經過進一步的調查，似乎角度區域被破壞，我需要手動刷新UI狀態，通過調用zone.run(() => {}); 從我做的不同測試中，看起來像這個問題也導致了奇怪的滾動問題。

來源

2017-02-27 14:42:19 Stanislasdrg

Chrome擴展+ angular-cli：構建後的用戶界面問題

回答

相關問題