在 Angular 中进行数据绑定时如何隐藏父组件中的子组件内容

Question

我是Angular的新手，我有两个组件，父组件是加载用户任务的Tasks，子组件是加载任务操作的ActionsComponent，我想将accountId和taskId字段从父组件传递给子组件，所以我添加了ActionsComponent 并使用数据绑定来填充这些变量。

任务：

    export class Tasks implements OnInit {

    accountId: string = '';
    taskId!: string;
....
}

任务 HTML 模板：

<app-actions [accountId]="accountId"  [taskId]="taskId" ></app-actions>

<h3>Your Tasks</h3>
<table id="mat-table" mat-table [dataSource]="accountsTasks" class="mat-elevation-z8">
....
</table>

这是 app-actions 显示这些字段的 HTML 模板：

<h3> stringValue value: {{ stringValue }}</h3>
<h3> accountId value: {{ accountId }}</h3>

我的问题是

app-actions

的全部内容都显示在父组件页面中，我不想在父组件中包含子组件内容，我只想将 accountId 和 taskId 字段传递给子组件并在子组件中使用它们组件，我怎样才能做到这一点而不在父组件中显示子组件？ TNX

Answer 1

希望你一切都好！

在这种情况下会显示出来，因为您在 Tasks.html 中使用标签显式声明了对组件应用程序操作的调用（此 make 在父组件中显示其内容）

我需要更深入地了解您的使用情况。您是否尝试在另一个页面中单独显示/使用应用程序操作本身？