Question

我试图在我的Angular 5组件中使用Router进行重定向。

在app.module中，我有：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { HttpModule } from '@angular/http'
import { Router, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ProductFormComponent } from './productform/productform.component';
import { ProductComponent } from './productform/product/product.component';
import { ProductService } from './productform/shared/product.service';

@NgModule({
    declarations: [
        AppComponent,
        ProductFormComponent,
        ProductComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        ReactiveFormsModule,
        RouterModule
    ],
    exports: [
        RouterModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

在组件中：

import { Injectable } from '@angular/core';
import { Component, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms'
import { Router, RouterModule } from '@angular/router'@Component({
    selector: 'app-product',
    templateUrl: 'product.component.html'
})
export class ProductComponent implements OnInit, AfterViewChecked {
    constructor(private router: Router) {
    }
}

每当我尝试在组件函数中使用this.router时，都会在控制台中收到错误消息：

Unhandled Promise rejection: StaticInjectorError[Router]: 
  StaticInjectorError[Router]: 
    NullInjectorError: No provider for Router! ; Zone: <root> ; Task: Promise.then ; Value: Error: "StaticInjectorError[Router]: 
  StaticInjectorError[Router]: 
    NullInjectorError: No provider for Router!"

我不确定我应该添加提供者以及什么提供者？

我是新手，不完全了解它的工作原理。

谢谢

Answer 1

您必须按如下所示添加路由信息。

import tensorflow as tf
import numpy as np

# some input
data_pldhr = tf.placeholder(tf.float32)
img_op = tf.get_variable('input_image', [1, 4, 4, 1], dtype=tf.float32, trainable=True)
img_assign = img_op.assign(data_pldhr)

# your starting image
start_value = (np.ones((4, 4), dtype=np.float32) + np.eye(4))[None, :, :, None]


# override variable_getter
def nontrainable_getter(getter, *args, **kwargs):
    kwargs['trainable'] = False
    return getter(*args, **kwargs)


# all variables in this scope are not trainable
with tf.variable_scope('myscope', custom_getter=nontrainable_getter):
    x = tf.layers.dense(img_op, 10)
    y = tf.layers.dense(x, 10)

# the usual stuff
cost_op = tf.losses.mean_squared_error(x, y)
train_op = tf.train.AdamOptimizer(0.1).minimize(cost_op)

# fire up the training process
with tf.Session() as sess:
    sess.run(tf.global_variables_initializer())
    sess.run(img_assign, {data_pldhr: start_value})

    print(sess.run(img_op))
    for i in range(10):
        _, c = sess.run([train_op, cost_op])
        print(c)
    print(sess.run(img_op))

注意：如果要重定向到其他组件，只需调用 window.location.replace（'url'）

Answer 2

您必须使用RouterModule.forRoot([])。如果您没有任何路线，请将其留空。像下面这样在import中使用它：

imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        ReactiveFormsModule,
        RouterModule.forRoot([])
    ]

从DOC

查找更多详细信息

注意：

以下是其DOC中的示例代码。如果您有路线，则可以从中获得灵感。

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent }          from './app.component';
import { CrisisListComponent }   from './crisis-list.component';
import { HeroListComponent }     from './hero-list.component';

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent },
];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer 3

您需要在您的应用程序的根目录中提供路由器。在您的导入数组中使用：

RouterModule.forRoot(routes)

您不需要导出RouterModule。当然，您也需要一个路由数组

Angular 5中的路由器模块不起作用，如何使用？

3 个答案: