Bikram Chhetri Ответов: 2

Невозможно связать шаблон в angular2 с ROUTER_DIRECTIVES

Невозможно установить домашний шаблон с помощью ROUTER_PROVIDERS в angular 2
Мой код таков:

главная.файл ТС :


import { bootstrap } from 'angular2/platform/browser';
import { bind } from 'angular2/core';
import { ROUTER_PROVIDERS } from 'angular2/router';
import { AppComponent } from './app.component';

bootstrap(AppComponent, [ROUTER_PROVIDERS]).then(
    success => console.log('AppComponent bootstrapped!'),
    error => console.log(error)
);


приложение.компонент.ТС:
import { Component } from 'angular2/core';
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { HomeComponent } from './home/home.component';
@Component({ 
  selector: 'my-app',
  template: `<router-outlet></router-outlet>`,
  directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  { path: '/', as: 'Home', component: HomeComponent, useAsDefault: true }
])
export class AppComponent {
  
  constructor() {

  }  
}


дома.компонент.ТС :

import {Component} from 'angular2/core';
import { RouterLink } from 'angular2/router';
@Component({ 
  selector: 'home', 
  templateUrl: 'app/home/home.component.html',
  directives: [RouterLink]
})

export class HomeComponent{}


Мой index.html есть:

<html>
  <head>
    <title>angular 2 sample application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/styles.css" rel="stylesheet" />
    <script src="scripts/es6-shim.js"></script>
    <script src="scripts/es6-shim.min.js"></script>
    <script src="scripts/system-polyfills.js"></script>
    <script src="scripts/shims_for_IE.js"></script>
    <script src="scripts/zone.min.js"></script>
    <script src="scripts/long-stack-trace-zone.js"></script>
    <script src="scripts/Reflect.js"></script>
    <script src="scripts/system.src.js"></script>
    <script src="scripts/Rx.js"></script>
    <script src="scripts/angular2.dev.js"></script>
    <script src="scripts/router.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
          packages: {
              app: { // must match your folder name
                  format: 'register',
                  defaultExtension: 'js'
              }
            }
        });
        System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <base href="/">
  <!-- 3. Display the application -->
  <body>
  <header >
  </header>
  <main class="container">
       <my-app>Loading...</my-app>
  </main>
  <footer>
  </footer>
  </body>
</html>


Я создал скрипт с gulpfile внутри папки src.
Пожалуйста, проверьте этот пример хорошее приложение от DanWahlin
Я не получаю никаких ошибок при запуске приложения.

Что я уже пробовал:

я пробовал с вышеупомянутой ссылкой, и это работает совершенно нормально.

2 Ответов

Рейтинг:
13

Konstantin A. Magg

Привет Бикрам Чхентри,

Я еще не совсем уверен. В официальный учебник[^] на угловой.Ио, они также зарегистрируйте ROUTER_PROVIDER в их главной составляющей декоратор. В конце концов, просто импортировать это недостаточно.

// app/app.component.ts 
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <a [routerLink]="['Heroes']">Heroes</a>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES],
  providers: [
    ROUTER_PROVIDERS,                                     <<< <<< <<<
    HeroService
  ]
})


Пожалуйста, дайте мне знать, если это может решить вашу проблему.
– Константин

Bikram Chhetri

Спасибо Вам, Константин Алексеевич Мэгг.
Я сделал весь мэшап и решил проблему, но до сих пор не знаю, в чем именно была проблема.
и да, я действительно установил директивы. :)

Konstantin A. Magg

Эй Бикрам,
вы хотите сказать, что решили проблему, и теперь она работает? Или вы решили проблему с точки зрения регистрации ROUTER_PROVIDER, но маршрутизатор все еще не работает?

Bikram Chhetri

Привет Константин Алексеевич Мэгг ,
- Да!!
Теперь моя простая привязка шаблона и маршрутизация работают совершенно нормально.
Спасибо :)

Рейтинг:
1

Bais Divyanshu 

Hi Here the correct way to resolve this issue of template binding.
app.component.ts:

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import {  HomeComponent} from './ HomeComponent';


@Component({
    selector: 'my-app',
    template: `                   
         <router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    { path: '/Home', name: 'Home', component: HomeComponent, useAsDefault: true },
])
export class AppComponent { }


home.component.ts :


import { Component } from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';
import { HTTP_PROVIDERS, Http } from 'angular2/http';

import { AppComponent } from './app.component';
import { Router } from 'angular2/router';

@Component({
    selector: home,
    templateUrl: home/home.component.html,
    directives: [ROUTER_DIRECTIVES],
    providers: [HTTP_PROVIDERS]
})

export class  HomeComponent{}


Попробуйте это и дайте мне знать