javascript - 将变量从一个 html 文件传递​​到另一个

Question

我正在创建一个 Angular 2 网页 - 我最初有 1 个 HTML 文件，其中包含我的网页 UI 所需的所有内容 - 出于设计原因，我取出了一部分 HTML 并为其创建了一个单独的组件(特别是 TreeView 显示)。我已经能够在我的原始 HTML 中使用其选择器 tree-selector 很好地引用其他 HTML 文件 (treeview)，如下所示:

<div *ngIf="showTree">
    <h1>Using treeview template.</h1>
    <tree-selector></tree-selector>
</div>

tree-selector.html 的代码是(我正在使用 PrimeNG UI 组件):

<p-tree [value]="fileSystemTree" selectionMode="single"  (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" (onNodeExpand)="nodeExpand($event)" [style]="{'max-height':'200px','overflow':'auto'}"></p-tree>

以前，当所有内容都在 1 个文件中时，很容易使用变量 "fileSystemTree" 来用于 [value]。现在我有两个 HTML 文件，我不确定如何在主 HTML 中再次使用 fileSystemTree 并将其链接到 tree-selector.html 中的 [value]。

Answer 1

传递给<tree-selector></tree-selector>作为输入参数，然后进一步到 <p-tree...>

<div *ngIf="showTree">
    <h1>Using treeview template.</h1>
    <tree-selector [fileSystemTree]="fileSystemTree"></tree-selector>
</div>

在树选择器组件中:

@Input() fileSystemTree: any;