Переключение между вкладкой материала в AngularDart уничтожает дочерние элементы - PullRequest
Новая
       6

Переключение между вкладкой материала в AngularDart уничтожает дочерние элементы

0 голосов
/ 26 июня 2018

Переключение между вкладками, созданными с помощью "material-tab", уничтожает все дочерние элементы этой "вкладки" в dom.

Ниже вы можете найти файлы проекта простого приложения, чтобы воспроизвести мою проблему.я использую dart 2 sdk и с угловым 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, мне нужно только добавить материалDirectives и materialProviders в нашAppComponent, как вы видите.

вы видите одну страницу с 2 вкладками:

  • Вкладка «Музыка» содержит встроенный YouTube iframe
  • Вкладка «Избранное» содержит тольконекоторый html (в идеале список видео на YouTube, которое я хочу воспроизвести)

Поэтому, когда я нажимаю на вкладке «Музыка», iframe начинает воспроизводить музыку, но когда я нажимаю на вкладке «Избранное», iframe не воспроизводится.больше музыки.При проверке DOM с помощью инструментов Chrome Dev, я вижу, что содержимое вкладки "стерты" (не уверен, что это правильное слово) из DOM.И только при повторном нажатии на вкладку содержимое вкладки снова добавляется в домен.Это действительно то, что нам нужно в целом, но для этого конкретного случая мне бы очень хотелось, чтобы iframe продолжала воспроизводить музыку, пока пользователи просматривают свой список избранного.

У вас есть идеи или примеры кодов для:

  • сохранять содержимое dom привязанным к dom, даже когда мы меняем tab (таким образом, iframe должен работать, даже когда мы переключаем tab)
  • или просто способ сохранить youtubeИгра в iframe (может быть, глобально? Но это кажется грязным)

Поскольку я новичок в дартс и угловатый, возможно, я пропустил шаблон / стратегию дизайна или функции, которые я не использовал.

Если вы перейдете по этой ссылке jsfiddle, вы сможете найти то, что я действительно хочу сделать, но это с необработанным js / html: https://jsfiddle.net/gsfkL6xL/353/

1 Ответ

0 голосов
/ 26 июня 2018

material-tab использует NgIf под капотом, который удаляет DOM.По умолчанию мы обнаружили, что это то, что вы обычно хотите.Это более производительно, чтобы удалить эти узлы и не иметь угловых изменений, обнаруживать их, или если браузер должен их нарисовать.

Вы можете увидеть реализацию здесь: https://github.com/dart-lang/angular_components/blob/8083c3e4e98b7cb6d20c10c791500dfcc5cb74ee/lib/material_tab/material_tab.dart#L56

Тем не менееМатериал-вкладка-панель была сделана так, чтобы вы могли сделать свою собственную реализацию материала-вкладки, например скрытой вкладки, которая сделает 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 {}

Извините за любые ошибки, вставленные в код.

...