Question

我正在努力开发一个Angular前端，不幸的是我也很缺乏经验。

我编写了这段代码，用于在不同组件之间导航到另一个组件，我无法判断这是不是很好的做法。

也许你可以提供帮助。

这是我的component.ts

 activateCoredataComp() {
  this.coredataIsActive = true;
  this.careerIsActive = false;
  this.skillsIsActive = false;
  this.projectsIsActive = false;
}

activateCareerComp() {
    this.coredataIsActive = false;
    this.careerIsActive = true;
    this.skillsIsActive = false;
    this.projectsIsActive = false;
}

activateSkillsComp() {
    this.coredataIsActive = false;
    this.careerIsActive = false;
    this.skillsIsActive = true;
    this.projectsIsActive = false;
}

activateProjectsComp() {
    this.coredataIsActive = false;
    this.careerIsActive = false;
    this.skillsIsActive = false;
    this.projectsIsActive = true;
}

这是我的HTML

<jhi-coredata *ngIf="coredataIsActive"></jhi-coredata>
<jhi-career *ngIf="careerIsActive"></jhi-career>
<jhi-skills *ngIf="skillsIsActive"></jhi-skills>
<jhi-projects *ngIf="projectsIsActive"></jhi-projects>

谢谢你的参与

Answer 1

为此，我宁愿在路由中使用查询参数，并依赖它们显示相应的视图。

在这种情况下，您只需要使用参数将用户重定向到当前路由，并且组件中的代码量将大大减少。

activateProjectsComp() {
    this.router.navigate(['../'], {
        relativeTo: route,
        queryParams: {
            projectsIsActive = true;
        } 
    });
}

Answer 2

<div class="list-inline">
    <ul class="nav nav-tabs text-center list-centered">
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" (click)="activateCoredataComp()"><span jhiTranslate="profiletool.profilesdashboard.editor.coredata"></span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" (click)="activateCareerComp()"><span jhiTranslate="profiletool.profilesdashboard.editor.career"></span> </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" (click)="activateSkillsComp()"><span jhiTranslate="profiletool.profilesdashboard.editor.skills"></span> </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" (click)="activateProjectsComp()"><span jhiTranslate="profiletool.profilesdashboard.editor.experience"></span> </a>
        </li>
    </ul>

这是一个很好的路由练习吗

2 个答案: