angular - 角路由打开扩展面板

Question

首先，我是 Angular 的新手，只学习了大约一个月，所以我有一个快速的问题，我似乎找不到任何相关内容。因此，我尝试使用 routerLink 从一个页面转到另一个页面，但我也希望该页面在到达所需页面后打开一个扩展面板。我的扩展面板没有以任何方式显示在控制台中，它只有基本信息。单击 routerLink 后，我是否必须创建一个方法才能打开选项卡？

提前致谢！

Answer 1

当您使用 nodeJS 创建项目时，您必须将属性路由添加为 ng new yourp_name --routing，如果您不这样做，则必须手动添加文件。在 app-routing.module.ts 你有一个 const 路由，你必须添加你的应用程序的路径，例如如果你有一个主页，必须是

const routes: Routes = [
  { path: "", redirectTo: "homepage", pathMatch: "full" },
  { path: "homepage", component: HomePageComponent }
];

当你添加它时，它会自动在所有地方创建。

之后，您可以在您的应用程序中将其作为路由器链接引用，并使用您给它的路径名，例如

<a routerLink="/homepage"></a>

希望它有效

Answer 2

首先，如果您是 Angular 新手，请不要担心，我们都是从头开始的。如果您想打开扩展面板，请尝试使用它，看看它是否适合您。

在您的 .ts 文件中：

openExpansionPanel: boolean = false;

toggleExpansionPanel(checked: boolean) {
    this.openExpansionPanel = checked;
}

在您的 .html 文件中：

<div class="form-group">
      <label class="switch">
          <input 
            type="checkbox" 
            [value]="false"
            [ngModel]="openExpansionPanel"
            (ngModelChange)="toggleExpansionPanel($event)"
            data-toggle="collapse" 
            href="#collapseFilters" 
            aria-expanded="false" 
            aria-controls="collapseFilters">
          <label>Expand Panel</label>
    </div>

    <!-- Your panel expands here -->
    <div class="collapse" id="collapseFilters">
    </div>

当您单击复选框时，id 为 collapseFilters 的 div 内的所有内容都将展开或折叠。让我知道它是否对你有用