Question

我正在使用Angular2处理路由器。我想制作的网址就像是https://mail.google.com/mail/u/0/#search/angular/15y58930e5a82911＆＃39;。使用＆＃39; Angular＆＃39;进行搜索时会出现此网址在邮箱中，然后从搜索结果中选择特定邮件。但我的申请没有达到目的。

我的应用程序结构是这样的，我有AppModule和SearchModule。每个模块都有自己的路由器。

app.routes.ts

export const routes: Routes = [
  {
    path: '',
    loadChildren: './home/index#HomeModule'
  },
  {
    path: 'search',
    loadChildren: './search/index#SearchModule'
  }
];

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <app-header></app-header>
    <router-outlet></router-outlet>
 `
})
export class AppComponent {

}

search.routes.ts

export const SearchRoutes = [
  {
    path: 'search',
    component: SearchContainerComponent,
    children: [
      { path: '', redirectTo: 'intro', pathMatch: 'full'  },
      { path: 'intro', component: SearchIntroComponent  },
      { path: 'artist/:id', component: DetailViewComponent }
    ]
  },
];

search.container.component

@Component({
  selector: 'app-search-container',
  template: `
  <div class="container">
    <div class="col-md-5">
      <app-search (search)="searchArtist($event);"> </app-search>
      <artist-list
        [artistList]="artistsList"
        (artist)="displaySelectedArtist($event)"
      ></artist-list>
    </div>
    <div class="col-md-7">
      <router-outlet></router-outlet>
    </div>
  </div>
  `
})

export class SearchContainerComponent implements OnInit {


}

使用这些代码，在左侧面板中，应该显示搜索结果的艺术家列表。在右侧面板中，第一个艺术家的详细信息应该自动显示。相应的网址变为http://xxx.xxx.com/#/artist/11。 11是第一位用“咖啡”搜索艺术家后获得的艺术家。但是，我想要的网址是http://xxx.xxx.com/#/search/coffee/artist/11＆＃39;而不是http://xxx.xxx.com/#/artist/11。

你们中有人可以就此提出一些建议吗？

Answer 1

您的路线配置：

export const SearchRoutes = [
  {
    path: 'search',
    component: SearchContainerComponent,
    children: [
      { path: '', redirectTo: 'intro', pathMatch: 'full'  },
      { path: 'intro', component: SearchIntroComponent  },
      { path: 'artist/:id', component: DetailViewComponent }
    ]
  },
];

定义您的路线的样子。如果你不想要＆＃34;搜索＆＃34;在网址中，您可以删除其路径：

export const SearchRoutes = [
  {
    path: '',
    component: SearchContainerComponent,
    children: [
      { path: '', redirectTo: 'intro', pathMatch: 'full'  },
      { path: 'intro', component: SearchIntroComponent  },
      { path: 'artist/:id', component: DetailViewComponent }
    ]
  },
];

或移动您的艺术家路线，使其不再是搜索路线的孩子。

Answer 2

我在我的项目中实现了与此类似的功能。希望你喜欢。我在此页面中从https://angular.io/api得到了这个想法，当你搜索它时会自动更新地址栏。

继续尝试这个

组件文件

import { NavigationExtras, ActivatedRoute, Router } from '@angular/router' 
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
   selector: 'app-employees',
   template: `
   <form [formGroup]="search">
       <input type="text" placeholder="Search" formControlName="Empname" />
       <input type="text" placeholder="Search" formControlName="destination" />
   </form>
   ` 
})

export class EmployeesComponent implements OnInit {
    search: FormGroup;

  constructor(
     private route: ActivatedRoute,
     private router: Router,
     private fb: FormBuilder
  ) { }

  ngOnInit() {
     createForm();

     this.route.queryParamMap.subscribe(params => {

        this.search.setValue({
            Empname: params.get('name') || '',
            destination: params.get('destination') || ''
        });

    });

    this.search.valueChanges.subscribe(() => {
        this.onSearchValueChange();
    });

  }


  onSearchValueChange() {

      let obj = new Object();
      const name = this.search.get('Empname').value;
      const des = this.search.get('destination').value;

      !!name && (obj['name'] = name); 
      !!des && (obj['destination'] = des);

      const navigationExtras: NavigationExtras = {
          relativeTo: this.route,
          queryParams: obj,
          replaceUrl: true
      };

      this.router.navigate(['../employees'], navigationExtras);
  }


  createForm() {
     this.search = this.fb.group({
        Empname: '',
        destination: ''
     });
  }
}

在此组件中，您只需要根据输入的型号名称更新输入的名称。我在这里使用表单构建器。

有关NavigationExtras的详细信息，请访问此链接 https://angular.io/api/router/NavigationExtras

如何使用Angular2路由器制作像URL这样的gmail？

2 个答案: