微调

app/cube-actions/cube-actions.component.css

 /* 安装、导入 modal */
+:host {
+  display: flex;
+}
 
 .dependency {
   margin-right: 0.8em;

app/cube-actions/cube-actions.component.ts

@@ -87,8 +87,6 @@ export class CubeActionsComponent implements OnInit, OnChanges {
       }
     }
 
-    // https://plus.google.com/+%E7%A5%9E%E6%A5%BD%E5%9D%82%E7%8E%B2%E5%A5%88/posts/1ngiNvqhM7C
-    this.ref.detectChanges();
   }
 
   get libraries(): string[] {

app/cube-arena/cube-arena.component.css

 :host {
   position: relative;
+  display: block;
 }
 
 .moreinfo {

app/cube-description/cube-description.component.css

+:host {
+  display: flex;
+}
+
 .panel {
   display: flex;
   border: 1px solid #eceeef;

app/cube-detail/cube-detail.component.css

@@ -9,7 +9,7 @@
 }
 
 .panel {
-  display: flex;
+  /*display: flex;*/
   border: 1px solid #eceeef;
   border-radius: 6px;
   background: rgba(255, 255, 255, .7);

app/cube-detail/cube-detail.component.html

 <ng-container *ngIf="currentCube">
   <cube-actions [currentCube]="currentCube" class="panel"></cube-actions>
   <cube-arena *ngIf="currentCube.useArena()" [currentCube]="currentCube" class="panel"></cube-arena>
-  <cube-description *ngIf="currentCube.useDescription()" [currentCube]="currentCube" class="d-flex"></cube-description>
+  <cube-description *ngIf="currentCube.useDescription()" [currentCube]="currentCube"></cube-description>
   <cube-news *ngIf="currentCube.useNews()" [currentCube]="currentCube" class="panel"></cube-news>
-  <cube-expansions *ngIf="currentCube.useExpansions()" [currentCube]="currentCube" class="panel"></cube-expansions>
+  <cube-expansions *ngIf="useExpansions()" [currentCube]="currentCube" class="panel"></cube-expansions>
 
 
   <!-- 设计未定，暂不封装 -->

app/cube-detail/cube-detail.component.ts

@@ -75,8 +75,6 @@ export class CubeDetailComponent implements OnInit, OnChanges {
           this.el.nativeElement.style.background = 'white';
         }
 
-        // 我不知道这里出现了什么问题，按理说点击鼠标造成的事件，应当是能自动检测的，不知道这里为什么不行
-        this.ref.detectChanges();
         // let top = await this.http.get('https://ygobbs.com/top.json').map(response => response.json()).toPromise();
         // console.log(top.topic_list.topics);
       });
@@ -104,6 +102,10 @@ export class CubeDetailComponent implements OnInit, OnChanges {
     }
   }
 
+  useExpansions(): boolean {
+    return this.currentCube.useExpansions() && this.cubesService.findChildren(this.currentCube).length > 0;
+  }
+
   updateInstallOption(app: Cube) {
     this.installOption = new InstallOption(app);
     this.installOption.installLibrary = this.settingsService.getDefaultLibrary().path;

app/cube-news/cube-news.component.css

+:host {
+  display: block;
+}
+
 p {
   margin-bottom: 0;
 }

app/cube-news/cube-news.component.html

 <h2 i18n>新闻</h2>
-<div id="news" *ngFor="let item of news">
+<div id="news" *ngFor="let item of currentCube.news">
   <h3><a class="title" [href]="item.url" target="_blank">{{item.title}}</a></h3>
   <span>{{item.updated_at | date:'shortDate'}}</span>
   <p>{{item.text}}</p>

app/lobby/lobby.component.ts

@@ -65,7 +65,7 @@ export class LobbyComponent implements OnInit {
     if (!this.settingsService.getLocale().startsWith('zh')) {
       this.apps.get('ygopro')!.conference = 'ygopro-international';
     }
-    this.ref.detectChanges();
+    // this.ref.detectChanges();
 
     let url = new URL('wss://api.moecube.com:3100');
     let params: URLSearchParams = url['searchParams'];

app/ygopro/ygopro.component.ts

@@ -292,7 +292,7 @@ export class YGOProComponent implements OnInit, OnDestroy {
             case 'delete':
               this.rooms.splice(this.rooms.findIndex(room => room.server === server && room.id === message.data), 1);
           }
-          this.ref.detectChanges();
+          // this.ref.detectChanges();
         };
         return connection;
       });
@@ -335,7 +335,7 @@ export class YGOProComponent implements OnInit, OnDestroy {
               );
           }
           this.refresh_replay_rooms();
-          this.ref.detectChanges();
+          // this.ref.detectChanges();
         };
         return connection;
       });

index.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="styles.css">
 
   <!-- Polyfill(s) for older browsers -->
-  <script src="node_modules/core-js/client/shim.min.js"></script>
+  <script src="node_modules/reflect-metadata/Reflect.js"></script>
 
   <script src="node_modules/zone.js/dist/zone.js"></script>
   <script src="node_modules/systemjs/dist/system.src.js"></script>

systemjs.config.js

@@ -75,7 +75,8 @@
       'jquery': 'npm:jquery/dist/jquery.min.js',
       'tether': 'npm:tether/dist/js/tether.min.js',
       'bootstrap': 'npm:bootstrap/dist/js/bootstrap.min.js',
-      'reconnecting-websocket': 'npm:reconnecting-websocket/dist/index.js'
+      'reconnecting-websocket': 'npm:reconnecting-websocket/dist/index.js',
+      'reflect-metadata': 'npm:reflect-metadata/Reflect.js'
     },
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {