2016-08-04 9 views
3

私は2番の角度2アプリケーションを構築しています。 Isは小さいもので、3から5のコンポーネントを持ち、チュートリアルに基づいています。 でComponentの日付を共有する方法をbootsrapの配列に追加してmain.tsに登録する方法を学びました。angular2 RC4のすべてのコンポーネントにROUTER_DIRECTIVEが必要ですか?

ROUTER_DIRECTIVESのようなものがありますか?私はすべてのルートをすべてのコンポーネントで利用できるようにしたいと考えています。いくつかのテンプレートにrouterLinksを追加したいのですが、ROUTER_DIRECTIVESをディレクティブ配列にコンポーネントのメタデータとして追加しないと、routerLinkは使用できません。

私の質問では、アプリケーションのすべてのコンポーネントに対してグローバルROUTER_DIRECTIVESを定義することでこのスニペットを回避できますか?

@Component({ 
    selector: 'players', 
    templateUrl: 'app/players.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class PlayersComponent {} 

答えて

2

現在(RC.4)あなたは

bootstrap(AppComponent, 
    [{provide: PLATFORM_DIRECTIVES, useValue: [ROUTER_DIRECTIVES], multi: true}]); 
を行うことができます

次のアップデート(RC.5)とモジュールの導入により、モジュール全体に対してディレクティブを提供できます。

+0

今日はリリースされました、今私はあなたが何を意味するのか知っています! – DenniJensen

+0

RC5で完全に動作します – DenniJensen

0

アプリをパッケージ化するwebpackを使用している場合、私はあなたがデフォルトで[ROUTER_DIRECTIVES]が含まれるように、それを構成することができると思う:

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var extractCSS = new ExtractTextPlugin('vendor.css'); 
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development'; 

module.exports = { 
    resolve: { 
     extensions: [ '', '.js' ] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, 
      { test: /\.css/, loader: extractCSS.extract(['css']) } 
     ] 
    }, 
    entry: { 
     vendor: [ 
      'bootstrap', 
      'bootstrap/dist/css/bootstrap.css', 
      'es6-shim', 
      'style-loader', 
      'jquery', 
      '@angular/common', 
      '@angular/compiler', 
      '@angular/core', 
      '@angular/http', 
      '@angular/platform-browser', 
      '@angular/platform-browser-dynamic', 
      '@angular/router', 
      '@angular/platform-server', 
     ] 
    }, 
    output: { 
     path: path.join(__dirname, 'wwwroot', 'dist'), 
     filename: '[name].js', 
     library: '[name]_[hash]', 
    }, 
    plugins: [ 
     extractCSS, 
     new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.DllPlugin({ 
      path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
      name: '[name]_[hash]' 
     }) 
    ].concat(isDevelopment ? [] : [ 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { warnings: false }, 
      minimize: true, 
      mangle: false // Due to https://github.com/angular/angular/issues/6678 
     }) 
    ]) 
}; 
関連する問題