Как работать с несколькими видами в Angular 6 - PullRequest
Новая
       44

Как работать с несколькими видами в Angular 6

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

Я создаю новое приложение Angular 6, чтобы заменить существующую страницу.Мы хотим, чтобы страница сохраняла тот же макет и поток.Эта страница имеет три столбца.Первый столбец - родитель, потом ребенок и великий ребенок.

Существует несколько различных путей, которые пользователь может выбрать, начиная с родительского.Они могут нажать на элемент в списке и просмотреть детали.Тем не менее, пользователь может нажать «новую» кнопку в родительском элементе и увидеть другое представление в дочернем элементе.

На данный момент я не заинтересован в маршрутизации, поскольку мне действительно не нужна прямая ссылка наребенок или внучка.

Я смотрю маршруты с детьми и маршруты маршрутов.Когда я запускаю приложение, мой родительский путь загружается, но я не вижу ребенка и внучку.Что я тут не так сделал?

Вот что у меня есть:

Маршруты 

const routes: Routes = [
  { 
    path: '', 
    pathMatch: 'full',
    component: EmailListComponent, 
    outlet: 'list_panel',
    children: [
      { 
        path: '',
        pathMatch: 'full',
        component: EmptyComponent,
        outlet: 'action_panel'
      },
      { 
        path: '',
        pathMatch: 'full',
        component: EmptyComponent,
        outlet: 'detail_panel'
      }
    ]}
];

app.component.html 

<table class="adminTable" 
      style="margin: 0 auto; min-width: 1100px; height: auto;">
  <tr>
    <td class="adminCell" 
        style="vertical-align:top; width:210px; padding:10px;">
      <router-outlet name="list_panel"></router-outlet>
    </td>

    <td class="adminCell" 
        style="vertical-align:top; width:290px; padding:10px;">
      <router-outlet name="action_panel"></router-outlet>
    </td>

    <td class="adminCell" 
        style="vertical-align:top; padding:10px;">
      <router-outlet name="detail_panel"></router-outlet>
    </td>
  </tr>
</table>

email-list.component.html 

<p style="font-weight:bold; font-size:larger;">Campaigns</p>

<table id="campaignList" 
        style="width:100%; margin:0px; padding:0px; border:0px; border-collapse:collapse;">
  <tbody>
    <tr>
      <td style="font-weight:bold; text-align:left; white-space:nowrap;">Birthdays</td>
      <td style="font-weight:bold; text-align:center; white-space:nowrap;">Status</td>
    </tr>
    <tr *ngFor="let template of templates">
      <td>{{ template }}</td>
      <td></td>
    </tr>
  </tbody>
</table>

email-list.component.ts 

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'

@Component({
  selector: 'app-email-list',
  templateUrl: './email-list.component.html',
  styleUrls: ['./email-list.component.css']
})
export class EmailListComponent implements OnInit {
  templates = ['Birthday 5-10', 'ResponsiveBDay', 'Testing', 'Birthday2', 'PresidentsDay2018', 'Christmas2017', 'Thanksgiving2017','Columbus Day', 'Labor Day', 'Father Day 2017'];

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

  ngOnInit() {}

}

empty.component.html 

<!-- This intentionally blank -->
<p>Empty is working</p>

empty.component.ts import {Component, OnInit} из '@ angular / core';

@Component({
  selector: 'app-empty',
  templateUrl: './empty.component.html',
  styleUrls: ['./empty.component.css']
})
export class EmptyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

1 Ответ

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

Я не уверен в причине, почему, но я никогда не мог заставить это работать, используя атрибут children в моей таблице маршрутов.Наконец-то я смог заставить его работать, когда перевел детей на тот же уровень, что и родитель.Я не уверен, что это новинка в Angular 6 или что.

Вот окончательный результат:

обновленный app-routing.module.ts 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CampaignSettingsComponent } from './campaign-settings/campaign-settings.component';
import { EmailListComponent } from './email-list/email-list.component';
import { EmailPreviewComponent } from './email-preview/email-preview.component';
import { EmptyComponent } from './empty/empty.component';

const routes: Routes = [
  { 
    path: '', 
    pathMatch: 'full',
    component: EmailListComponent, 
    outlet: 'list_panel',
  },
  { 
    path: '',
    pathMatch: 'full',
    component: EmptyComponent,
    outlet: 'action_panel'
  },
  { 
    path: '',
    pathMatch: 'full',
    component: EmptyComponent,
    outlet: 'detail_panel'
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, 
      {enableTracing: false} // for debug only
    )
  ],
  exports: [ 
    RouterModule
  ]
})

export class AppRoutingModule { }
...