0

我正在创建一个角度远程应用程序，我想在其他应用程序中重用组件。为了做到这一点，我使用 angular 12 制作了一个测试项目，带有 angular 材料和模块联合。

除了使用有角材料的组件外，该应用程序运行良好，您可以在下面看到远程和外壳中的 UI。我还附上了组件的 html 实现。

我的远程用户界面 在此处输入图像描述

我的外壳界面 在此处输入图像描述

<style> input[type=text] {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid silver;
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 20px;} 

button {
  border: 2px solid silver;
  color: green;
  background-color: white;
  font-size: 16px;
  padding: 10px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
  cursor: pointer;} button:active {
  border-color: black; }

#container {
  border: 2px darkred dashed;
  padding: 20px;
}
</style>

<div class="file-picker">
  <div class="row">
    <div class="col-md-3">
      <input type="file" #file placeholder="Choose file" 
       (change)="uploadFile(file.files)" style="display: none">
      <button type="button" class="btn btn-success" mat-button 
       (click)="file.click()">Upload File to bucket <mat- 
        icon>attach_file</mat-icon></button>
      <span *ngIf="convertToSvfService.inProgress"class="upload">
        <mat-progress-bar mode="query"></mat-progress-bar>
      </span>
    </div>
  </div> 
</div>
4

1 回答 1

1

我在使用 Angular Material 时遇到了类似的问题，其中 mat-select 的打开面板无法关闭。

对我来说，问题是我BrowserModule在多个应用程序中导入了。确保仅将其导入 shell / 主机应用程序的根模块。在您的微前端中，您应该CommonModule改为导入。

据我了解，BrowserModule多次导入可能会破坏您的应用程序，因为它会覆盖 Angular 运行时的某些部分。

于 2021-09-15T14:13:51.993 回答