在 AngularDart 中的材质选项卡之间切换会破坏子元素答案

【问题标题】：Switching between material-tab in AngularDart destroys child elements在 AngularDart 中的材质选项卡之间切换会破坏子元素
【发布时间】：2018-06-26 00:05:18
【问题描述】：

在使用“material-tab”创建的选项卡之间切换会破坏 dom 中此“选项卡”的所有子元素。

您可以在下面找到一个简单应用的项目文件来重现我的问题。我正在使用 dart 2 sdk 和 angular 5.0.0 作为依赖项

main.dart：

import 'package:angular/angular.dart';
import 'package:angular_web_app/app_component.template.dart' as ng;

void main() {
    runApp(ng.AppComponentNgFactory);
}

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>my web app</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <script defer src="main.dart.js"></script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

app_component.dart：

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: [ coreDirectives, materialDirectives],
  providers: [materialProviders],
)
class AppComponent{}

app_component.html：

<material-tab-panel>
    <material-tab label="Music">
        <iframe id="player" type="text/html" width="640" height="390"
                src='https://www.youtube.com/embed/JvqXj2cAaY4?autoplay=1'
                frameborder="0"></iframe>
    </material-tab>
    <material-tab label="Favorites">
        <h2>My favorite musics</h2>
    </material-tab>
</material-tab-panel>

这里和默认生成的文件相比没什么特别的，我只是有一个自定义的app_component.html，只需要在我们的AppComponent中添加materialDirectives和materialProviders就可以了。

您会看到一个带有 2 个标签的页面：

“音乐”标签包含嵌入式 youtube iframe
“收藏夹”选项卡仅包含一些 html（最好是 youtube 列表我想播放的视频）

因此，当我单击“音乐”选项卡时，iframe 开始播放音乐，但是当我单击“收藏夹”选项卡时，iframe 不再播放音乐。在使用 chrome 开发工具检查 dom 时，我看到一个选项卡的内容已从 dom 中“擦除”（不确定它是否是正确的词）。只有当再次单击选项卡时，选项卡的内容才会再次添加到 dom。这确实是我们通常需要的，但对于这种特殊情况，我真的希望 iframe 仍在播放音乐，同时用户浏览他们最喜欢的音乐列表。

你有什么想法或示例代码：

即使我们更改选项卡，也保持 dom 的内容附加到 dom（这样即使我们切换标签，iframe 也应该仍在运行）
或者只是保持 youtube iframe 播放的一种方式（也许在全球方式？但这似乎很脏）

由于我是 dart 和 Angular 的新手，我可能错过了我没有使用的设计模式/策略或功能。

如果您点击这个 jsfiddle 链接，您可以找到我真正想做的事情，但这是使用原始 js/html：https://jsfiddle.net/gsfkL6xL/353/

【问题讨论】：

标签： html angular iframe dart angular-dart

【解决方案1】：

material-tab 在底层使用 NgIf 来移除 DOM。默认情况下，我们发现这是您通常想要的。删除这些节点会更高效，并且不需要角度变化来检测它们，或者让浏览器需要绘制它们。

你可以在这里看到实现：https://github.com/dart-lang/angular_components/blob/8083c3e4e98b7cb6d20c10c791500dfcc5cb74ee/lib/material_tab/material_tab.dart#L56

说material-tab-panel是为了让你可以自己实现material-tab，例如hidden-tab，这将使上面链接的div隐藏/显示，而不是使用NgIf。

一个简单的方法是像这样扩展标签：

@Component(
  selector: 'hidden-tab',
  providers: const [
    const Provider(Tab, useExisting: HiddenTabComponent),
    const Provider(DeferredContentAware, useExisting: HiddenTabComponent)
  ],
  template: '''
        <div class="tab-content" [hidden]="!active">
          <ng-content></ng-content>
        </div>''',
  styleUrls: const ['package:angular_components/material_tab/material_tab.scss.css'],
)
class HiddenTabComponent extends MaterialTabComponent {}

对于白板代码中的任何错误，我们深表歉意。

【讨论】：

好的，所以您链接的 div 应该是
。我应该扩展 MaterialTabComponent 来执行此操作还是从头开始重写 MaterialHiddenTabComponent？抱歉问，但一些代码真的很棒！
太棒了！我将编辑您的答案并在您的代码 sn-p 中添加缺少的内容（如调用父构造函数）并在需要时在其他文件中添加修改，然后我将验证您的答案！这样，未来的观众将获得一个完整的工作示例。非常感谢！