Question

我正在尝试使用Ionic 2 DeepLinker在Ionic（3.9.2）应用程序中实现以下配置，在该应用程序中，我的页面的常规版本位于index.html，/ terms和/ card，并且具有不同的样式/club/index.html、/club/terms和/ club / card的版本：

@NgModule({  declarations: MyComponents,  imports: [  BrowserModule,  HttpClientModule,  // DeepLinker!! IonicModule.forRoot(MyApp, { locationStrategy : 'path' }, {  links : [  { component : HomePage, name : 'Home', segment : '' },  { component : TermsPage, name : 'Terms of Use', segment : 'terms' },  { component : CardPage, name : 'Savings Card', segment : 'card' }, // Club Aliases; these pages will have the same content as above, // but slightly different styles, defined elsewhere. { component : HomePage, name : 'Home', segment : 'club' }  { component : TermsPage, name : 'Terms of Use', segment : 'club/terms' },  { component : CardPage, name : 'Savings Card', segment : 'club/card' }, //...

有没有一种方法可以使用Ionic 2 DeepLinker？

一些注意事项：

我们通过以下链接导航到页面（并防止出现默认设置）：

<a href="/terms" (click)="openPage('TermsPage', $event)">Terms of Use</a>

其中openPage使用NavController的Nav Component将页面推入导航堆栈，如下所示：

$event.preventDefault();
this.nav.push(page.component, params);

我们还必须设置我们的网络服务器，以将子目录（例如“ / terms”）重写为index.html。信息：https://github.com/ionic-team/ionic/issues/10565#issuecomment-282659179

我还分叉了@ ionic-app-scripts，以使其在本地开发（例如实时重载）服务器上工作（重写为index.html）： https://github.com/senseijames/ionic-app-scripts

Answer 1

在DeepLinkConfig链接中，“名称”只是一个字符串标识符，可用于通过其字符串别名解析页面组件。我建议不要使用空格和大写字母，并像这样调整您的实现：

重构DeepLinkConfig

   links : [
      { component : HomePage, name : 'home', segment : '' },
      { component : TermsPage, name : 'terms', segment : 'terms' },
      { component : CardPage, name : 'card', segment : 'card' },
      { component : HomePage, name : 'club', segment : 'club' }
      { component : TermsPage, name : 'club-terms', segment : 'club/terms' },
      { component : CardPage, name : 'club-card', segment : 'club/card' }
   ]

重构点击处理程序

openPage(name: string, params: any) {
    this.nav.push(name, params);
}

重构按钮标记

<button ion-button (click)="openPage('terms', {})">Terms of Use</button>
<button ion-button (click)="openPage('club-terms', {})">Club Terms</button>
<button ion-button (click)="openPage('club-card', { id: 1234, username: 'someuser', rewards: false })">Savings Card</button>

这样，您可以按名称导航，而不必将页面组件导入到每个控制器中以链接到页面组件本身。同样，根据IonicFramework文档，离子按钮属性修饰的按钮元素也是IonicFramework文档的首选导航UI，使用它们可以避免防止香草html锚的默认行为。

如何在Ionic 2的DeepLinker中的多个URL上使用相同的组件视图？

1 个答案: