向index.html

Question

我正在尝试将值传递给index.html，后者将调用app.componenet。我尝试在执行重定向之前处理在我的根组件中传递的查询字符串

LINK目标

http://localhost:4200/index/1

HtML

  <app-root></app-root>

APP.Component

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AppComponentService]
})

export class AppComponent {
 constructor(elm: ElementRef,private _service: AppComponentService, private _rout: ActivatedRoute) {

        this._rout.params.subscribe(params => {

            console.log('id' + params['id']);//value is undefined


        });
}

应用路由

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

*****************************更新***************** ****************************************************** ***

我的问题应该是溃逃。.请记住，我试图先击中app.comonent，然后再执行一些逻辑操作，然后再重定向到仪表板

I change my rout to

const routes: Routes = [
    { path: '', component: AppComponent }
];

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

export class AppRoutingModule { }

应用组件

constructor(elm: ElementRef,private _service: AppComponentService, private _rout: ActivatedRoute) {

        this._rout.params.subscribe(params => {

            console.log('id' + params['id']);//value is undefined
             //some logic then will redirect to dashboard

        });

Answer 1

在这里，您可以根据URL获取app.component.ts中的参数。

即http://localhost:4200/index/1

 export class AppComponent {
      constructor(private router: Router) {
        this.router.events.subscribe( (event: RouterEvent) => {
          if(event.url.startsWith('/index/')){
            console.log("id is %s", event.id);
            this.router.navigate(['/']);
          }

        });
      }

    }

如果要加载静态全局变量，则可以与路由数据对象一起传递

例如：

{ path: '', redirectTo: '/dashboard', pathMatch: 'full', data : {'one':'1', 'two': '2'} },

然后您将获得如下所示的数据对象

export class AppComponent {

       constructor(private router: Router) {
           this.router.events.subscribe( (event: RouterEvent) => {
             console.log(event['snapshot'].data)      
           });
       }

}