Question

我目前在我的Angular项目中使用MaterialiseCSS，似乎materialisecc.js或/和或jquery.js加载了路由，它只在我重新加载应用程序的eache页面时才有效，这对我的路由非常不利因为当我启动它时我必须重新加载页面。我试图在点击事件上自动重新加载页面，但现在它看起来不像SPA。

我该如何解决这个问题？谢谢你的帮助

我的索引页

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CPDEP</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

 <app-root></app-root>
 
</body>
</html>

我的路线代码

import { ModuleWithProviders } from  '@angular/core';
import { Routes, RouterModule } from  '@angular/router';
import { AppComponent } from './app.component';
import { CandidatComponent } from './candidat/candidat.component';
import { ZoneComponent } from './zone/zone.component';
import { EnqueteurComponent } from './enqueteur/enqueteur.component';
import { PAEComponent } from './pae/pae.component';
import { PAPComponent } from './pap/pap.component';
import { PAMCComponent } from './pamc/pamc.component';
import { QuestionnaireEnqComponent } from './questionnaire-enq/questionnaire-enq.component';
import { OrganisationComponent } from './organisation/organisation.component';
import { RapportsComponent } from './rapports/rapports.component';
import { SeancesOrientationComponent } from './seances-orientation/seances-orientation.component';
import { SeancesAppuiConseilComponent } from './seances-appui-conseil/seances-appui-conseil.component';
import { OrOuestComponent } from './or-ouest/or-ouest.component';
import { OrNordComponent } from './or-nord/or-nord.component';
import { OrNordEstComponent } from './or-nord-est/or-nord-est.component';
import { OrNordOuestComponent } from './or-nord-ouest/or-nord-ouest.component';
import { OrSudComponent } from './or-sud/or-sud.component';
import { OrSudEstComponent } from './or-sud-est/or-sud-est.component';
import { OrSudOuestComponent } from './or-sud-ouest/or-sud-ouest.component';
import { OrGrandAnseComponent } from './or-grand-anse/or-grand-anse.component';
import { OrArtibonitesComponent } from './or-artibonites/or-artibonites.component';
import { OrNippesComponent } from './or-nippes/or-nippes.component';
import { ApConOuestComponent } from './ap-con-ouest/ap-con-ouest.component';
import { ApConNordComponent } from './ap-con-nord/ap-con-nord.component';
import { ApConNordEstComponent } from './ap-con-nord-est/ap-con-nord-est.component';
import { ApConNordOuestComponent } from './ap-con-nord-ouest/ap-con-nord-ouest.component';
import { ApConSudComponent } from './ap-con-sud/ap-con-sud.component';
import { ApConSudEstComponent } from './ap-con-sud-est/ap-con-sud-est.component';
import { ApConGrandanseComponent } from './ap-con-grandanse/ap-con-grandanse.component';
import { ApConNippesComponent } from './ap-con-nippes/ap-con-nippes.component';
import { ApConArtibonitesComponent } from './ap-con-artibonites/ap-con-artibonites.component';
import { ApConSudOuestComponent } from './ap-con-sud-ouest/ap-con-sud-ouest.component';
import { SeancePresentationComponent } from './seance-presentation/seance-presentation.component';
import { DebatCommunautaireComponent } from './debat-communautaire/debat-communautaire.component';
import { CocktailRelPubComponent } from './cocktail-rel-pub/cocktail-rel-pub.component';
import { JeuneFormateurComponent } from './jeune-formateur/jeune-formateur.component';
import { GrandMandataireComponent } from './grand-mandataire/grand-mandataire.component';
import { AnimSeOrComponent } from './anim-se-or/anim-se-or.component';
import { MandatairesComponent } from './mandataires/mandataires.component';
import { AvocatsComponent } from './avocats/avocats.component';
import { OperatricesComponent } from './operatrices/operatrices.component';
import { CentreAppelComponent } from './centre-appel/centre-appel.component';
import { CentreAppelSeOrComponent } from './centre-appel-se-or/centre-appel-se-or.component';
import { ElecteurRegroupeComponent } from './electeur-regroupe/electeur-regroupe.component';
import { ElecteurCertifieComponent } from './electeur-certifie/electeur-certifie.component';
import { CouverturesElecteurComponent } from './couvertures-electeur/couvertures-electeur.component';
import { CentreBureauComponent } from './centre-bureau/centre-bureau.component';
import { DeploiementMandataireComponent } from './deploiement-mandataire/deploiement-mandataire.component';
import { RapportDeroulementComponent } from './rapport-deroulement/rapport-deroulement.component';
import { InscriptionCandidatComponent } from './inscription-candidat/inscription-candidat.component';
import { ProcesVerbalComponent } from './proces-verbal/proces-verbal.component';
import { DossierContentieuxComponent } from './dossier-contentieux/dossier-contentieux.component';
import { TTmembreComponent } from './ttmembre/ttmembre.component';
import { PresentationThematiqueComponent } from './presentation-thematique/presentation-thematique.component';
import { TTSeanceFormationComponent } from './ttseance-formation/ttseance-formation.component';
import { TTRencontreComponent } from './ttrencontre/ttrencontre.component';
import { OCPartenaireComponent } from './ocpartenaire/ocpartenaire.component';
import { OCSeancePresentationComponent } from './ocseance-presentation/ocseance-presentation.component';
import { OCSeanceFormationComponent } from './ocseance-formation/ocseance-formation.component';
import { OCRencontreComponent } from './ocrencontre/ocrencontre.component';
import { CTmonocomComponent } from './ctmonocom/ctmonocom.component';
import { CTSeanceApppuiConseilComponent } from './ctseance-apppui-conseil/ctseance-apppui-conseil.component';
import { CTSeanceThematiqueComponent } from './ctseance-thematique/ctseance-thematique.component';


export const router: Routes = [
    {path: '', redirectTo : 'PaeM', pathMatch : 'full'},
    {path :'PaeM/Candidat', component : CandidatComponent},
    {path :'PaeM/Zone', component : ZoneComponent},
    {path :'AppComponent', component : AppComponent},
    {path :'PaeM/Enqueteur', component : EnqueteurComponent},
    {path :'PaeM', component : PAEComponent},
    {path :'PapM', component : PAPComponent},
    {path :'PamcM', component : PAMCComponent},
    {path :'PaeM/Question', component : QuestionnaireEnqComponent},
    {path :'PaeM/Organisation', component : OrganisationComponent},
    {path :'PaeM/Rapport', component :RapportsComponent},

    {path :'PaeM/SeanceOrientation/OrOuest', component :OrOuestComponent},
    {path :'PaeM/OrNord', component :OrNordComponent},
    {path :'PaeM/OrNordEst', component :OrNordEstComponent},
    {path :'PaeM/OrNordOest', component :OrNordOuestComponent},
    {path :'PaeM/OrSud', component :OrSudComponent},
    {path :'PaeM/OrSudEst', component :OrSudEstComponent},
    {path :'PaeM/OrSudOuest', component :OrSudOuestComponent},
    {path :'PaeM/OrGrandAnse', component :OrGrandAnseComponent},
    {path :'PaeM/OrNippes', component :OrNippesComponent},
    {path :'PaeM/OrArtibonites', component :OrArtibonitesComponent},

    {path :'PaeM/ApConOuest', component :ApConOuestComponent},
    {path :'PaeM/ApConNord', component :ApConNordComponent},
    {path :'PaeM/ApConNordEst', component :ApConNordEstComponent},
    {path :'PaeM/ApConNordOest', component :ApConNordOuestComponent},
    {path :'PaeM/ApConSud', component :ApConSudComponent},
    {path :'PaeM/ApConSudEst', component :ApConSudEstComponent},
    {path :'PaeM/ApConSudOuest', component :ApConSudOuestComponent},
    {path :'PaeM/ApConGrandAnse', component :ApConGrandanseComponent},
    {path :'PaeM/ApConNippes', component :ApConNippesComponent},
    {path :'PaeM/ApConArtibonites', component :ApConArtibonitesComponent},
    {path :'PaeM/ApConArtibonites', component :ApConArtibonitesComponent},

    {path :'PaeM/SeanceOrientation', component :SeancesOrientationComponent},
    {path :'PaeM/SeanceAppuiConseil', component :SeancesAppuiConseilComponent},

    {path :'PaeM/SeancePresentation', component :SeancePresentationComponent},
    {path :'PaeM/DebatCom', component :DebatCommunautaireComponent},

    {path :'PaeM/Cocktail', component :CocktailRelPubComponent},
    {path :'PaeM/JeuneF', component :JeuneFormateurComponent},
    {path :'PaeM/GrandM', component :GrandMandataireComponent},
    {path :'PaeM/AnimSO', component :AnimSeOrComponent},
    {path :'PaeM/Avocats', component :AvocatsComponent},

    {path :'PaeM/Opératrices', component : OperatricesComponent},
    {path :'PaeM/CentreAppel', component :CentreAppelComponent},
    {path :'PaeM/ApSO', component :CentreAppelSeOrComponent},
    {path :'PaeM/elecreg', component :ElecteurRegroupeComponent},
    {path :'PaeM/elecCer', component :ElecteurCertifieComponent},

    {path :'PaeM/CouElec', component :CouverturesElecteurComponent},
    {path :'PaeM/CeBu', component :CentreBureauComponent},
    {path :'PaeM/DepMan', component :DeploiementMandataireComponent},
    {path :'PaeM/RapDer', component :RapportDeroulementComponent},

    {path :'PaeM/InsCan', component :InscriptionCandidatComponent},
    {path :'PaeM/ProcVer', component :ProcesVerbalComponent},
    {path :'PaeM/DosCon', component :DossierContentieuxComponent},

    {path :'PamcM/TTmembre', component : TTmembreComponent},
    {path :'PamcM/PreTh', component : PresentationThematiqueComponent},
    {path :'PamcM/TTseFo', component : TTSeanceFormationComponent},
    {path :'PamcM/Trene', component : TTRencontreComponent},
    {path :'PamcM/TTpartenaire', component :OCPartenaireComponent},
    {path :'PamcM/TTseancepr', component : OCSeancePresentationComponent},
    {path :'PamcM/TTSeancefo', component : OCSeanceFormationComponent},
    {path :'PamcM/TTRencontre', component : OCRencontreComponent},
    {path :'PamcM/TTcom', component : CTmonocomComponent},
    {path :'PamcM/TTseApCo', component : CTSeanceApppuiConseilComponent},
    {path :'PamcM/TTSeTh', component : CTSeanceThematiqueComponent},



];


export const routes : ModuleWithProviders= RouterModule.forRoot(router);

Answer 1

没有什么用管道，因为我使用angular-2-materialize，我必须在大多数组件中使用自定义“materialize”属性，所以我只将materialize =“collapsible”添加到我的组件中它只能工作现在很好

Angular 2：MaterialiseCSS模块无法正确加载路由

1 个答案: