Ivan Stroykin

В общем, кому будет нужно или просто интересно. Реализовал.

Допустим selector будет: "test-modal". Тогда там где нужно будет выводить это модальное окно пишем:
<test-modal #testModal></test-modal>
а на button вешаем событие:

<button class="btn btn-primary" (click)="testModal.showTestModal()">Открываем модальное окно</button>

в компоненте модального окна пишем:

@ViewChild('testModal') public testModal: ModalDirective;

public showTestModal(): void {
    this.testModal.show();
}

public hideTestModal(): void {
    this.testModal.hide();
}

Не знаю насколько это правильно. Но сделал ))

В общем так...Имеем такой routing (естественно выдуманный):

export const routes: Routes = [
  {path: 'test1', component: Test1Component, data: {title: 'Тест 1', roles: ['admin', 'user']}},
  {path: 'test2', component: Test2Component, children: [
    {path: 'test5', component: Test5Component, data: {title: 'Тест 5', roles: ['admin', 'user'}},
    {path: 'test6', component: Test6Component, data: {title: 'Тест 6', roles: ['admin'}},
  ]},
  {path: 'test3', component: Test3Component, data: {title: 'Тест 3' roles: ['admin', 'user']}},
  {path: 'test4', component: Test4Component, data: {title: 'Тест 4' roles: ['admin']}},
];

Далее есть компонент навигации:

menuNavigation = [];
routing: Array<Object>;

constructor(private router: Router) {
     this.routing = router.config;
}

ngOnInit() {
     this.buildMenuNavigation(this.routing);
}

buildMenuNavigation(navigation: Array<Object>, parentUrl: string = ''): void {
     for (let nav of navigation) {
         // Если есть дочерние пункты, прогоняем еще раз
         if (nav['children']) {
            let newParentUrl = '/' + nav['path'];
             this.buildMenuNavigation(nav['children'], newParentUrl);
         }

         // Добавляем пункты в которых есть 'data: {}'
         if (!nav['children'] && nav['data']) {
             this.menuNavigation.push({
                 url: parentUrl + '/' + nav['path'],
                 title: nav['data']['title'],
                 roles: nav['data']['roles'],
             });
         }
     }
 }

И вид:

<ng-container *ngFor="let nav of menuNavigation">
     <template [hasRole]="nav.roles">
          <li routerLinkActive="active">
               <a [routerLink]="nav.url"><span>{{nav.title}}</span></a>
          </li>
     </template>
</ng-container>

hasRole моя директива. Кому интересно, есть у меня в вопросах, там один очень хороший человек помог доработать

Пример
Пример используя цикл
<div [innerHTML]="item.body"></div>
Вместо "item.body" вставляете то, что нужно вывести в "div" вместе с html разметкой

Пример

Странно, видимо где-то первый раз ошибку допустил.

В общем, кому будет интересно или может поможет кому. В init просто пишем условие, на подобии:
if (this.authService.isLoggedIn()) { ... }
А дальше всю работу по переадресации выполняет роутинг, непосредственно после полной инициализации приложения
Метод isLoggedIn() представляет из себя обычный возврат приватного свойства, которое определяется следующим образом:

set loggedIn(val: boolean) {
     if (typeof val == 'undefined') {
         val = !!this.cookie.getObject('loggedIn');
     } else {
         this.cookie.putObject('loggedIn', val);
     }
     this._loggedIn = val;
 }

О. Не знаю, правильное ли это решение? Ссылка

Решил проблему в общих чертах. Правда не обошлось без маленького костыля, но видимо по другому пока никак.
Тут либо использовать для аутентификации страницу которая будет сгенерирована на django приложением, либо при отправки формы с приложения на angular2 приватно генерить форму тем же django для правильного получения токена.
Ну а благодаря пакету angular2-cookie обращение к токену заменилось с такого:

document.cookie.replace(/(?:(?:^|.*;\s*)csrftoken\s*\=\s*([^;]*).*$)|^.*$/, "$1");

на вот такое:
this.cookie.get('csrftoken');

Если у кого-то есть решение лучше, буду рад его узнать