角度4快速路由重定向页面重新加载

时间:2018-02-15 10:47:50

标签: angular express angular2-routing mean-stack

我遇到了将快速路线重定向到角度的问题。当我从路线重新加载页面时,我收到快递显示的http响应。请找截图when navigating through front end - works fine。然后,当我从这条路线重新加载页面时,我收到快速直接显示的响应on reloading the http response is displayed。我知道订单app.get(*)可能是这里的问题。这是我的代码
`app-module :(故意不将它们作为子路径)

    var appRoutes = [
    {
     path: 'select',
     component: TempComponent,
     pathMatch: 'full'
    },
    {
     path: 'select/:name',
     component: OptionsComponent,
     pathMatch: 'full'
    }
    ] 

TempComponent:

    <ul class='nav nav-pills nav-stacked'>
    <li><a  [routerLink] = "['/select', 'op1']">Option 1</a></li>
    <li><a  [routerLink] = "['/select', 'op2']">Option 2</a></li>
    <li><a  [routerLink] = "['/select', 'op3']">Option 3</a></li>
    <li><a  [routerLink] = "['/select', 'op4']">Option 4</a></li>
    </ul>
    <router-outlet></router-outlet>

OptionsComponent- HTML:

    <p>
    options works!
    </p>
    <app-temp></app-temp>
    <h4> The ouptut data from the server is {{ opdata }}</h4>

OptionsComponent-TS:

    type: {name: string};
    opdata: any;
    paramsSubscription: Subscription;                         
    constructor(private route: ActivatedRoute, private webService:
    WebService) { }
    ngOnInit() {
    this.type = { name: this.route.snapshot.params['name'] };

    this.paramsSubscription = this.route.params.subscribe(
    (params: Params) => {
    this.type.name = params['name'];
    this.webService.getData(this.type.name).then((data: any) => {
     this.opdata = data;
    }).catch((err) => {
      console.log('The error is ', err);
    });
    });
    }

WebService的:

    @Injectable()
    export class WebService {

    constructor(private http: HttpClient) {}

    getData(type) {
    return this.http.get('/select/' + type).toPromise();
    }
    }

Serverjs:

    app.use(bodyParser.json());

    app.use((req,res,next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,
    Content-Type, Accept");
    next();
    });

    app.use(express.static(__dirname + '/../dist'));


    // app.get('*', (req,res) => {
    //   res.sendFile(path.join(__dirname + '/dist/index.html'));
    // });

    app.get('/select/:name', (req,res) => {
    var name = req.params.name;
    console.log('getting here with ', name);
    res.json(name);
    });

    app.get('*', (req,res) => {
    res.sendFile(path.join(__dirname + '/dist/index.html'));
    });`  

我在app.get('/ select /:name')之前使用了app.get('*')但我的请求没有通过。 facing error 404 when i do this。请帮助我正确处理这种情况。感谢。

0 个答案:

没有答案