Enterprise: タブ：タブの追加/削除時に再初期化されたIframe

ビデオでもこの問題を再現する方法をフォローしていませんか？ mms001とは何ですか？ アプリケーションのコーディングの問題のように聞こえますか？

タブイベントとは何か関係がありますか？ https://master-enterprise.demo.design.infor.com/components/tabs/example-activate-event.htmlまたは、特にここのタブで何をしていますか？

縮小されたテストケースに少し時間を費やすか、例でこれを確認する方法があるかどうかを確認できますか？

@ tmcconechymms001はM3アプリケーションです。 @marclouisgenedeguzman Timが共有したhttps://master-enterprise.demo.design.infor.com/components/tabs/example-activate-event.html

OK、またこれはタブの追加/削除を示す関連例です。
https://master-enterprise.demo.design.infor.com/components/tabs/example-add-tab-button.html

例でこれを再現できるはずですが、詳細が必要です。

エンタープライズNGサンプルにレプリケーションをアタッチする

HTMLコードを添付する
tabs-dismissible.demo.txt

これがBingと何の関係があるのか​​わかりません。 それはおそらくこの問題について私を混乱させると思います。 しかし、ビデオでは何が起こっているように見えます：

a）タブを閉じると、別のタブがアクティブになります（これは有効と思われます）
b）タブが非表示になってから表示されたため、iframeがリロードされています

iframeを制御できないため、これについて何ができるかわかりません（また、iframeの使用は強くお勧めしません）。

たぶん、iframeのコンテンツをキャッシュする方法があります。 それとも、それらを使用して情報をDOMに入れることができないのでしょうか。 基本的：

• display：noneを使用すると、フレームがリロードされます
• それを望まない場合は、v isibility：hiddenまたはopacity：0を使用してフレームを非表示にします

タブコンポーネントに可視性を簡単に使用させることができないことを除いて：非表示または不透明またはそれは問題を引き起こします。 多分アイデアは

• アクティブ化したら、iframeをページに移動します
• 非アクティブ化時に、ページから隠されたタブからiframeを移動しますか？

さらにレビューすると、問題が発生します。 それは奇妙なタブの削除と追加でのみそれを行います。 私は今これを見ています。

これに関する簡単な更新は、それが何をしているかについてのオプションがあるので、単純な「回避策」があるということです。 回避策は、設定「disableAutoUpdatedCall」を追加することです

<div soho-tabs disableAutoUpdatedCall="true">

Ngコンポーネントでこれが行っているのは、タブ数が変更されたときにタブを再初期化することです。 これは、動的タブを使用しているときにタブ数が変更された場合にのみ実際に必要です。

私は「もし」もっと良い解決策があるかどうかを探しています。それはこれをデフォルトでtrueに設定し、いくつかのAPIを変更する必要があるかもしれませんが、これらについてはまだわかりません。 この設定は間違いなくこのケースを解決するので、今のところ試してテストしてください。 そして、私は明日その研究を終えます

こんにちは@tmcconechy 、

提案された回避策を試しましたが、機能しません。 私たちのユースケースは、動的タブを作成し、（開いている他のタブに影響を与えることなく）それらを閉じることができることです。これが、新しいM3プログラムインスタンスを新しいタブでインスタンス化する方法です。 disableAutoUpdateCall = "true"を適用するときに発生する2つの問題：

1. アプリケーションメニューを折りたたむ（タブを再計算する）などしない限り、タブを動的に追加しても表示されません。
2. dissmissible = "true"であっても、disableAutoUpdateCall = "true"を追加すると、閉じるアイコンのあるsvgが失われます。
3. 動的タブ（たとえば、app-menuがトリガーされた後に表示されます）に移動しようとするとエラーが発生します

問題1と2を示す.gif。

エラーの問題3を示す.img。

ng-quickstartなどのプラグアンドプレイで使用できるh5タブ機能モジュールを作成しました。
m3-tabs.zip

1. src / app / m3-tabsにあるように抽出します
2. app.moduleインポートに追加：[]
3. 追加 app.component.htmlの#maincontent内

私が提供した「単純な」（動的なものは実際には決してそうではない）例で、この潜在的な回避策を機能させることができれば幸いです。

フィードバックのおかげで、ダイナミックタブは私がまだ見ていたものでした。 これら2つのことが矛盾するため、その場で変更する必要がないことを願っています。 また、私はアイコンの問題について考えていませんでした。 これをより良く修正するためのアイデアがいくつかあるので、私は探し続けます。

素晴らしい、ありがとうティム！

@whernebrink私はPRをプッシュしました。必要に応じて、そのブランチで試してみることができます。 問題は一般に、タブ数が変更された場合にタブを更新する必要があることです。 したがって、これを取得したら、「安全」なときに更新/更新を強制する新しいUIを指定しました。

だからあなたはする必要があります
a） <div soho-tabs disableAutoUpdatedCall="true"> https：//github.com/infor-design/enterprise-ng/pull/930/files#diff-8d10e630a098469d93f796aa77460a4ad30a1bb8890072cf929c486e55950078R4を使用します
b）タブを変更する関数にhttps://github.com/infor-design/enterprise-ng/pull/930/files#diff -11fb6fb3dbc217802abffcc158f358d6034f6e408cbc134dee0d0011a9d690afR68を追加して、タブを同期します

これがうまくいくことを願っています。 唯一の問題は、何らかの理由でタブを変更してiframeの同期を維持する必要がある場合です。 IEは、タブの動的な変更が状態をリセットできる場所で行うことを望んでいますか？

@tmcconechyありがとう！ 私はそれを試してみましたが、それはうまくいっているようです。つまり、検索したものを維持します。 iframeを使用した例は、私たちの側から見て最良/最も重要ではありません（1.そもそもこれが許可されるべきかどうかわからない、2。これが現在どれだけ使用されているかわからないため）。 しかし、それを示すのは簡単でした。 より良い、はるかに現実的なシナリオは、ユーザーがスクロールされたデータグリッドを持っていて、別のタブを閉じたり開いたりすると、タブが更新され、ポジショニング（およびロードされたデータ）が失われる場合です。 他の場所で変更されていないことを確認できないため、これをリセットするのは困難です。

ただし、提案された修正はデータグリッドの場合にも機能すると思います。 :)ただし、その更新方法を使用するのに「安全」な時期がいつになるかはわかりません（いつ更新をトリガーしたいですか？）。 修正が行われたときに試してみる必要があります。ただし、将来のシナリオの1つとして、ドラッグイベントなどでタブを並べ替える場合があります。 このアクションは、コンテキストを失うことなく不可能になりますか？

あなたのPRに関して：tabs-dissmissible.demoのマークアップから[beforeCloseCallback]="onBeforeClose"を削除しないことをお勧めします。これは知っておくとよいので、おそらくいくつかの愛（.tsのコールバックへの入力）を与えてください。私たちの消費者（たとえば、タブの非表示を防ぐ方法）。

同じトピックで、[beforeCloseCallback] = "onBeforeClose"コールバックと（activate）= "onActivated（$ event）"で取得するSohoTabsEventに不整合があります

• beforeCloseCallbackのevent.tab（および2番目のパラメーター）はタブの<li>を参照するため、jqueryでtabIdを取得します（例： event.tab.find("a").attr("tabId")
• （アクティブ化された）のevent.tabは、実際の<a>
  ここで、event.tab.getAttribute（ 'ng-reflect-tab-id'）を介してIDを取得できます。

この「矛盾」の理由はありますか？ SohotTabsEventevent.tabは常に同じ「もの」を返すはずだと私には思えます。 個人的には、離れた場所で<a>取得したいので、.getAttribute（）を直接実行できます。

エッセイをお詫びします...最後に、これは上記のデータグリッドの問題の.gifです。視覚化してください。 再度、感謝します。

こんにちは@whernebrink

1）これでデータグリッドのケースが修正されると思います。 私はそれを再現しようとしましたが、https：//github.com/infor-design/enterprise/commit/5e2b066ffeb9cdf2b9ed255e4bd6f1997ea0876eできませんでした
2）表示されているタブを交換する場合のユースケースでは、「安全」だと思いますか？ たぶん、アプリケーションの機能を変更すると、タブが再読み込み/変更されますか？ 例では、ボタンを押してボタンを変更すると？ しかし、あなたの場合、それが実際にいつ起こるのか、私にはわかりません。
3）ここで検討しているタブをドラッグするリクエストがありますhttps://github.com/infor-design/enterprise/issues/4520それを機能させる必要があります...
4）そのイベントを元に戻しました..それを取り除くつもりはありませんでした
5）はい、私はあなたが不安定さについて何を意味するのかわかります。 私たちはそれを変えることができます。 しかし、あなたはそれのために別の問題を作ることができますか？ それは（マイナーな）破壊的な変化です。

この問題を再開しました。 @whernebrinkを使用すると、動的配列を介してタブを追加するケースが機能しないことがわかりました。 したがって、そのケースもサポートするためのより良い修正を調査します。

@whernebrinkマスターブランチと4.35.xブランチにプッシュした妥当な修正を見つけました。 また、リリースする必要があるので、7.8.0（Ng 9.0）と8.1.0（Ng 10）を作成しました。

したがって、これらのバージョンをアプリで試すか、エンタープライズでテストすることができます-ng master /8.1.xまたは/7.8.xブランチ

• http：// localhost ：4200 / ids-enterprise-ng-demo / tabs-dynamicに移動します
• タブ2で何かを検索
• 別のタブを閉じてみてください->検索結果はリセットされません
• [新しいタブを追加]ボタンを押します->検索結果はリセットされません
• 他の2つのボタンをクリックすると検索がリセットされるわけではありませんが、これらは実際には新しいifamesを備えたまったく新しいタブであるため、これで問題ありません。

これは修正ですhttps://github.com/infor-design/enterprise/commit/d168b78454c4c800377c7c160775754f36272de5問題は、タブが常に必要ではないのに親コンテナに再追加されていたということでした。