个人中心
gpt4 book ai didi

html - 在AngularDart中的material-tab之间切换会破坏子元素

转载 作者：行者123 更新时间：2023-12-03 03:26:40 24 4
gpt4 key购买 nike

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

您可以在下面找到一个简单应用程序的项目文件，以重现我的问题。
我正在使用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 dev工具检查dom时，我发现dom中的选项卡内容是“抹掉的”(不确定是否是正确的词)。
    并且只有当再次单击选项卡时，选项卡的内容才会再次添加到dom。
    通常，这实际上是我们需要的，但是对于这种特殊情况，我确实希望iframe仍在播放音乐，同时用户浏览其收藏的音乐列表。

    您是否有以下想法或示例代码:
  • 即使我们更改选项卡，也将dom的内容保留在dom上(这种方式
    即使切换标签页，iframe也应该仍在运行)
  • 或保持youtube iframe播放的一种方法(也许是在全局范围内
    方式 ？但这似乎很脏)

    • 由于我是 Dart 新手，所以我可能错过了我没有使用过的设计模式/策略或功能。

    如果您遵循此jsfiddle链接，则可以找到我真正想要做的，但这是与原始js / html一起使用的: https://jsfiddle.net/gsfkL6xL/353/

    最佳答案

    material-tab在幕后使用NgIf删除了DOM。默认情况下，我们发现这是您通常想要的。删除那些节点，没有 Angular 变化检测它们，或者让浏览器需要绘制它们，这样的性能更高。

    您可以在此处查看实现: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 {}

    对不起，如果有任何错误，该代码将在白板上显示。

    关于html - 在AngularDart中的material-tab之间切换会破坏子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51033255/

    24 4 0
    文章推荐： dart - 如何在 flutter 多行和换行中制作EditableText或TextField？
    文章推荐： Dart 和 ZeroMQ 服务器
    文章推荐： dart - 模拟build_runner在nodeJs服务器上服务
    文章推荐： android - 如何使用flutter访问android中的特定文件夹？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com