双routerlink，但不知道它来自哪里

Question

我有一个Angular 6应用程序。而且我有一个指向其他组件的链接。但是我看到两个按元素划分的routerlinks

Googled，请阅读文档

所以我有这个链接：

<div routerLink="/instellingen/organisatie" class="panel-generic panel-generic-add medicine-add">
      <div>
        <span class="fa-stack fa-lg add-symbol">
          <i class="fa fa-circle-thin fa-stack-2x"></i>
          <i class="fa fa-plus fa-stack-1x"></i>
        </span>
      </div>
    </div>

这是我的app.route.ts文件：

import { AddIndicatorComponent } from './add-indicator/add-indicator.component';
import { AdviceArchiveComponent } from './advice-archive/advice-archive.component';
import { AdviceComponent } from './advice/advice.component';
import { AdviceDetailComponent } from './advice/advice-detail/advice-detail.component';
import { AdviceInformationComponent } from './advice/advice-information/advice-information.component';
import { AuthCallbackComponent } from './auth-callback/auth-callback.component';
import { AuthGuard } from './shared/auth/auth.guard.service';
import { BrochureDetailComponent } from './dossier/brochure-detail/brochure-detail.component';
import { ChatFullComponent } from './chat-full/chat-full.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { EcheqOverviewComponent } from './echeq/echeq-overview/echeq-overview.component';
import { EcheqProcessComponent } from './echeq/echeq-process/echeq-process.component';
import { HelpPageComponent } from './help-page/help-page.component';
import { MeasurementComponent } from './measurement/measurement.component';
import { ObjectiveComponent } from './objective/objective.component';
import { ObjectiveListComponent } from './objective/objective-list/objective-list.component';
import { ResourceDetailComponent } from './resource-detail/resource-detail.component';
import { ResourcePageComponent } from './resource-page/resource-page.component';
import { SelfcareComponent } from './settings/selfcare/selfcare.component';
import { SettingsOrganisationDetailComponent } from './settings/settings-organisation-detail/settings-organisation-detail.component';
import { TaskComponent } from './task/task.component';
import { TrainingComponent } from './training/training.component';
import { TrainingDetailComponent } from './training/training-detail/training-detail.component';
import { WebshopComponent } from './webshop/webshop.component';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { NgModule } from '@angular/core';
import { HealthComponent } from './health/health.component';
import { DossierPdfComponent } from './dossier/dossier-pdf/dossier-pdf.component';
import { SettingsAddOrganisationComponent } from './settings/settings-add-organisation/settings-add-organisation.component';

const routes: Routes = [
  {
    path: 'auth',
    component: AuthCallbackComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  },
  {path: '', redirectTo: '/dossier', pathMatch: 'full'},
  {path: 'dossier', loadChildren: './dossier/dossier.module#DossierModule' },

  {path: 'instellingen', loadChildren: './settings/settings.account.module#SettingsAccountModule'},


  {
    path: 'gezondheid',
    component: HealthComponent,
    canActivate: [AuthGuard]
  },
    {
      path: 'gezondheid/edit',
      component: AddIndicatorComponent,
      canActivate: [AuthGuard]
    },
    {
      path: 'gezondheid/Measurement/:meting',
      component: MeasurementComponent,
      canActivate: [AuthGuard]
    },
   {
     path: 'gezondheid/Lifestyle/:task',
     component: TaskComponent,
     canActivate: [AuthGuard]
   },
  {
    path: 'webshop',
    component: WebshopComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'selfcare',
    component: SelfcareComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'advies/archief',
    component: AdviceArchiveComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'informatie',
    component: AdviceInformationComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'informatie/brochure/:brochure',
    component: BrochureDetailComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'advies/:advies',
    component: AdviceComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'advies/detail/:id',
    component: AdviceDetailComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'advies',
    redirectTo: 'advies/huidig',
    pathMatch: 'full',
    canActivate: [AuthGuard]
  },
  {
    path: 'chat',
    component: ChatFullComponent,
    canActivate: [AuthGuard]
  },

  {
    path: 'hulpbronnen',
    component: ResourcePageComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'hulpbronnen/detail/:hulpbronId',
    component: ResourceDetailComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'echeq',
    component: EcheqOverviewComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'echeq/detail/:echeqId',
    component: EcheqProcessComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'help',
    component: HelpPageComponent,
    canActivate: [AuthGuard]
  },

  {
    path: 'dossier/overig/pdf/:dossierEntryId',
    component: DossierPdfComponent,
    canActivate: [AuthGuard]
  },

  // {
  //   path: 'instellingen',
  //   redirectTo: 'instellingen/account',
  //   canActivate: [AuthGuard],
  //   pathMatch: 'full'
  // },

  {
    path: 'instellingen/organisatie/',
    component: SettingsAddOrganisationComponent,
    canActivate: [AuthGuard],
    pathMatch: 'full'
  },


  {
    path: 'trainingen',
    component: TrainingComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'doel/:id',
    component: ObjectiveComponent,
    canActivate: [AuthGuard]
  },
   {
     path: 'doelen',
     component: ObjectiveListComponent,
     canActivate: [AuthGuard]
   },
  {
    path: 'trainingen/:training',
    component: TrainingDetailComponent,
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules})
  ],
  exports:[RouterModule]
})

export class AppRoutingModule {}

但是，如果我查看google chrome中的元素，就会看到：

<div class="panel-generic panel-generic-add medicine-add" routerlink="/instellingen/organisatie" tabindex="0" ng-reflect-router-link="/instellingen/organisatie"><div><span class="fa-stack fa-lg add-symbol"><i class="fa fa-circle-thin fa-stack-2x" aria-hidden="true"></i><i class="fa fa-plus fa-stack-1x" aria-hidden="true"></i></span></div></div>

我还添加了完整的app.routes文件，以使其更加清晰 所以有两个路由器链接？

那是哪里来的？

谢谢

什么是ng-reflect-router-link？

这是孔页面：

<app-vital10-page [noTopBar]="true">
<h2 class="section-header section-header-settings">Gegevens toegang</h2>

<div class="main-row main-row-settings">
  <section class="data-entry">
    <div class="panel-section">
      <h3 class="settings-subheader">Organisaties</h3>
      <p>Onderstaande organisaties assisteren bij je Vital10 deelname en hebben toegang tot jouw gegevens:</p>
    </div>

    <div routerLink="/instellingen/organisatie" class="panel-generic panel-generic-add medicine-add">
      <div>
        <span class="fa-stack fa-lg add-symbol">
          <i class="fa fa-circle-thin fa-stack-2x"></i>
          <i class="fa fa-plus fa-stack-1x"></i>
        </span>
      </div>
    </div>

    <div class="panel-generic" *ngFor="let org of orgs; let i = index" routerLink="/instellingen/organisatie/{{org.organisationId}}">
      <h4 class="panel-generic-header">
        <span *ngIf="!org.logo; else logo"><i class="panel-generic-icon thumbnail-tiny fa fa-building"></i></span>
        <ng-template #logo><img class="panel-generic-icon thumbnail thumbnail-tiny thumbnail-round" src="{{ displayOrgLogo(org.logo) }}" alt="logo"></ng-template>
        {{ org.name }}
        <i *ngIf="org.isPrimary" class="fa fa-star org-icon-star" title="Primaire Organisatie"></i>
        <i *ngIf="org.isDefault" class="fa fa-lock org-icon-star" title="Standaard Organisatie"></i>
      </h4>
      <dl class="panel-generic-info org-panel-info">
        <ng-container *ngIf="org.startDate">
          <dt class="panel-generic-info-label">Start:</dt>
          <dd class="panel-generic-info-text">{{ org.startDate | date:'dd-MM-y' }}</dd>
        </ng-container>
        <ng-container *ngIf="org.street">
          <dt class="panel-generic-info-label">Adres:</dt>
          <dd class="panel-generic-info-text">{{ org.street }} {{ org.houseNumber }}{{ org.houseExtension }}</dd>
        </ng-container>
        <ng-container *ngIf="org.city || org.state || org.country">
          <dt class="panel-generic-info-label"></dt>
          <dd class="panel-generic-info-text">{{ org.city }} {{ org.state }} {{ org.country }}</dd>
        </ng-container>
        <ng-container *ngIf="org.locations">
          <dt class="panel-generic-info-label">Locaties:</dt>
          <dd class="panel-generic-info-text">
            <ul>
              <li *ngFor="let loc of getPermittedLocations(i)">{{ loc.name }}</li>
            </ul>
          </dd>
        </ng-container>
      </dl>
      <span class="readmore">
        <svg style="width:14px;height:14px;fill: currentColor" viewBox="0 0 24 24">
          <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
        </svg>
      </span>
    </div>

  </section>
</div>
</app-vital10-page>


<!-- <div class="main-row main-row-settings">
  <section class="data-entry">
    <div class="panel-section">
      <button class="button" type="submit">Instellingen opslaan</button>
    </div>
  </section>
</div> -->

路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SettingsAccountComponent } from './settings-account/settings-account.component';
import { AuthGuard } from 'app/shared/auth/auth.guard.service';
import { SettingsGeneralComponent } from './settings-general/settings-general.component';
import { SettingsLogComponent } from './settings-log/settings-log.component';
import { SelfcareComponent } from './selfcare/selfcare.component';
import { SettingsAppsComponent } from './settings-apps/settings-apps.component';
import { SettingsIndicatorPermissionsComponent } from './settings-indicator-permissions/settings-indicator-permissions.component';
import { SettingsNavigationComponent } from './settings-navigation/settings-navigation.component';

const settingsRoutes: Routes = [

  {
    path: '',
    component: SettingsNavigationComponent,
    canActivate: [AuthGuard],
    children: [
     {path: '', redirectTo: 'account', pathMatch: 'full', canActivate: [AuthGuard] },
     {path: 'account', component: SettingsAccountComponent, canActivate: [AuthGuard] },
     {path: 'apparaten' , component: SelfcareComponent, canActivate: [AuthGuard] },
     {path: 'apps' , component: SettingsAppsComponent, canActivate: [AuthGuard] },
     {path: 'indicatiepermissies' , component: SettingsIndicatorPermissionsComponent, canActivate: [AuthGuard] },
     { path: 'algemeen', component: SettingsGeneralComponent, canActivate: [AuthGuard] },
     {path: 'log' , component: SettingsLogComponent, canActivate: [AuthGuard] },
    ]
   },
];


@NgModule({
  imports: [RouterModule.forChild(settingsRoutes)],
  exports: [RouterModule],
})

export class SettingsRoutingModule {}

import { Component, OnInit } from '@angular/core';
import { SettingsOrgPermission } from '../../interfaces/settings/org.permission.interface';
import { HealthAPIService } from '../../shared/health-api/health-api.service';
import { ModalService } from '../../shared/modal/modal.service';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-settings-add-organisation',
  templateUrl: './settings-add-organisation.component.html',
})
export class SettingsAddOrganisationComponent implements OnInit {
  wholeOrg: boolean;
  orgs: Array<SettingsOrgPermission>;
  selectedOrg: SettingsOrgPermission;
  allOrgs: Array<SettingsOrgPermission>;

  modalId = 'permissionModal';
  modalTitle = 'Bevestig toestemming';

  error = '';

  constructor(private healthAPIService: HealthAPIService, private modalService: ModalService, private router: Router) {
    this.orgs = [];
    this.wholeOrg = false;
  }

  handlePermissionsLoad(result) {
    this.allOrgs = result;
    for (const item of result) {
      if (!item.hasPermission) {
        this.orgs.push(item);
      }
    }
    this.selectedOrg = this.orgs[0];
  }

  getSelectedLocations(): Array<string> {
    return this.selectedOrg.locations
      .map(loc => {
        if (this.wholeOrg || loc.hasPermission) {
          return loc.name;
        }
        return null;
      })
      .filter(el => !!el);
  }

  ngOnInit() {
    this.healthAPIService.getPermissions().subscribe(result => this.handlePermissionsLoad(result));
    // for testing modal
    /* setTimeout( () => {
      this.modalService.open( this.modalId );
    }, 1000 ); */
  }

  toggleWholeOrg() {
    this.wholeOrg = !this.wholeOrg;
    this.selectedOrg.allLocations = this.wholeOrg;
  }

  handleAddOrganisation(form: NgForm) {
    this.modalService.open(this.modalId);
  }

  cancelAdd() {
    this.modalService.close(this.modalId);
    if (this.error) {
      // TODO: remove before prod
      this.router.navigateByUrl('/instellingen/algemeen');
    }
  }

  handleConfirmation() {
    this.selectedOrg.hasPermission = true;
    this.selectedOrg.allLocations = this.wholeOrg;
    const updatedOrgs = this.allOrgs.map(org => {
      if (org.organisationId === this.selectedOrg.organisationId) {
        return this.selectedOrg;
      }
      return org;
    });

    this.healthAPIService.putPermission(updatedOrgs).subscribe(
      result => {
        if (result.success) {
          this.router.navigateByUrl('/instellingen/algemeen');
        }
      },
      error => {
        this.error = 'Er ging iets mis bij het opslaan. Probeer het later nog eens';
      }
    );
  }
}

Answer 1

这不是两个，这是angular管理绑定的方式，对于其他输入绑定，您可以看到相同的东西

routerlink="/instellingen/organisatie"

ng-reflect-router-link="/instellingen/organisatie"

更新

顺便说一句，您的代码有问题 您在路由中都拥有了这些

{path: 'instellingen', loadChildren: './settings/settings.account.module#SettingsAccountModule'},

和

  {
    path: 'instellingen/organisatie/',
    component: SettingsAddOrganisationComponent,
    canActivate: [AuthGuard],
    pathMatch: 'full'
  },

所以要么你应该懒惰，要么不懒惰，你不应该混搭。然后，您需要向该模块路由添加organisatie，该路由现在不存在

Answer 2

Angular框架正在添加该属性。不用担心。