Как использовать один и тот же компонентный вид для нескольких URL-адресов в DeepLinker Ionic 2? - PullRequest
Новая
       7

Как использовать один и тот же компонентный вид для нескольких URL-адресов в DeepLinker Ionic 2?

0 голосов
/ 29 июня 2018

Я пытаюсь выполнить следующую настройку в своем приложении Ionic (3.9.2), используя Ionic 2 DeepLinker, где у меня есть обычные версии моих страниц по адресу index.html, / term и / card и в другом стиле версии в /club/index.html, / club / Terms и / club / card:

@NgModule({
 declarations: MyComponents,
 imports: [
 BrowserModule,
 HttpClientModule,
 // DeepLinker!! IonicModule.forRoot(MyApp, { locationStrategy : 'path' }, {
<br> links : [
<br> { component : HomePage, name : 'Home', segment : '' },
<br> { component : TermsPage, name : 'Terms of Use', segment : 'terms' },
<br> { 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' }
<br> { component : TermsPage, name : 'Terms of Use', segment : 'club/terms' },
<br> { component : CardPage, name : 'Savings Card', segment : 'club/card' }, //...

Есть ли способ добиться этого с помощью Ionic 2 DeepLinker ?

Некоторые заметки:

Мы перемещаемся по страницам, следуя ссылкам (и предотвращая по умолчанию): 

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

, где openPage помещает страницу в стек навигации, используя Nav Component NavController , например: 

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

Нам также пришлось настроить наш веб-сервер для перезаписи подкаталогов (например, «/ term») в index.html. Информация: https://github.com/ionic-team/ionic/issues/10565#issuecomment-282659179

И я также разбудил @ ionic-app-scripts, чтобы заставить этот (переписать на index.html) работать на моем локальном сервере разработки (например, live reload): https://github.com/senseijames/ionic-app-scripts

1 Ответ

0 голосов
/ 16 октября 2018

В ссылках 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' }
   ]

Обработчик щелчков Refactor 

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>

Таким образом, вы можете перемещаться по имени, и вам не нужно будет импортировать компоненты страницы в каждый контроллер для связи с самим компонентом страницы. Кроме того, элементы кнопок, украшенные атрибутом ion-button, являются предпочтительным пользовательским интерфейсом навигации в документации IonicFramework, и их использование позволит избежать необходимости по умолчанию использовать ванильные html-якоря.

...