个人中心
gpt4 book ai didi

html - 组件内的 routerLink 不生成内容

转载 作者：太空宇宙 更新时间：2023-11-04 14:31:01 25 4
gpt4 key购买 nike

我花了很多时间从 component 生成 html 内容，但是这个 component 是从 AppCompoment 生成的。所以我想用 routerLink 从组件生成内容。我将在下面展示示例。了解我从 pluralsight.com 教程中使用 DeborahK 获得的这个解决方案如何，我的源代码与此相同 https://github.com/DeborahK/Angular2-GettingStarted/blob/master/APM - 最终的。好的，让我们解释一下我的代码。

我有主index.html

<html>
<head>
    <base href="/">
    <title></title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <!--<script src="node_modules/es6-shim/es6-shim.js"></script>-->
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- if NOT included, does not work in IE-->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <!--Http module-->
    <script src="node_modules/angular2/bundles/http.dev.js"></script>

    <!-- Routing -->
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    <link href="app/css/jquery-ui.css" rel="stylesheet">
    <link href="app/css/bootstrap.min.css" rel="stylesheet">
    <link href="app/css/font-awesome.min.css" rel="stylesheet">
    <link href="app/css/style.css" rel="stylesheet">
    <link href="app/css/jquery-ui-timepicker-addon.css" rel="stylesheet">

    <script src="app/js/jquery.min.js"></script>
    <script src="app/js/jquery-ui.min.js"></script>
    <script src="app/js/jquery-ui-timepicker-addon.js"></script>
    <script src="app/js/jquery-ui-sliderAccess.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="app/js/bootstrap.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/ts/main.component').then(null, console.error.bind(console));
    </script>
</head>

<!-- 3. Display the application -->

<body>
    <zds>Loading...</zds>
</body>

</html>

这个index.html加载了我的main.component，main.component的内容是

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent)
    .then(success => console.log("Bootstrap loaded successfully..."))
    .catch(error => console.log(error));

好的，这段代码加载了我的 app.component.ts

import { Component, OnInit } from "angular2/core";
import { HTTP_PROVIDERS } from "angular2/http";
import 'rxjs/Rx';   // Load all features
import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';

import {NavbarComponent} from "./navbar.component";
import {WelcomeComponent} from "./welcome.component";
import {TicketComponent} from "./ticket.component";
import {PaymentComponent} from "./payment.component";
import {ReceiptComponent} from "./receipt.component";
import {TestComponent} from "./test";

@Component({
    selector: 'zds',
    templateUrl: 'app/html/app.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [HTTP_PROVIDERS, ROUTER_PROVIDERS]
})

@RouteConfig([
    { path: '/', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },
    { path: '/ticket', name: 'Ticket', component: TicketComponent },
    { path: '/payment', name: 'Payment', component: PaymentComponent },
    { path: '/receipt', name: 'Receipt', component: ReceiptComponent },
    { path: '/test', name: 'Test', component: TestComponent }
])

export class AppComponent {
}

好的，我的app.html是

<div>
    <div class="content">
        <div class="process-bar" *ngIf="submenuEnabled">
            <div class="steps" style="margin-top:10px;margin-bottom:20px;">
                <a [routerLink]="['Ticket']" class="active">{{ticket}}</a>
                <a [routerLink]="['Payment']">{{payment}}</a>
                <a [routerLink]="['Receipt']">{{receipt}}</a>
            </div>
        </div>

        <div id="process-container">
           <router-outlet></router-outlet>
        </div>
    </div>
</div>

此后显示欢迎页面，没有问题。 submenu 中的路由有效，组件内部的 routerLink 有问题。欢迎页面有按钮，见下面的welcome.html

<div class="welcome">
    <h3>{{welcomeTitle}}</h3>
    <div>{{welcomeDescription}}</div>
    <div class="bottom-text">{{welcomeBuyText}}</div>
</div>

<div class="buttons-footer">
    <div>
        <a [routerLink]="['Test']" class="btn btn-main btn-large"><i class="glyphicon glyphicon-ok"></i>{{welcomeBuyTicket}}</a>
    </div>
</div>

welcome.html 页面的welcome.component.ts，非常简单:

import {Component, OnInit} from "angular2/core";
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from "angular2/router";
import { Router } from 'angular2/router';

@Component({
    //selector: 'welcome',
    templateUrl: 'app/html/welcome.html',
    providers: [ROUTER_PROVIDERS],
    directives: [ROUTER_DIRECTIVES]
})

export class WelcomeComponent implements OnInit {
    welcomeBuyTicket = "Buy ticket";
    //other string contants from html

    constructor() {  }

    ngOnInit() {

    }

}

例如，我希望 welcome.html 上的按钮将我引导至测试组件(html 页面)。所以我有 [routerLink]="['Test']", test.component.ts 已经存在。带有模板的组件是

import { Component, OnInit }  from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';

@Component({
    template: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet metus tortor. Suspendisse tempus sed ipsum sed auctor. Cras suscipit metus tortor, ac accumsan sem pharetra a. Proin ac eleifend elit, nec efficitur odio. Vivamus mattis laoreet turpis at vehicula. Donec commodo ipsum velit, sed maximus justo accumsan vitae. Phasellus rhoncus risus quam, vel egestas sem lobortis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec laoreet est est, at pharetra dolor fringilla dictum. Nam dignissim velit nisl, quis placerat ex lacinia aliquam. Ut fermentum a est ullamcorper rutrum. Cras vitae nulla laoreet, interdum lorem a, blandit mauris.</p>`,
    directives: [ROUTER_DIRECTIVES]
})

export class TestComponent implements OnInit {

    constructor() {
    }

    ngOnInit(): void {
    }
}

所以现在，当我点击 welcome.html 上的按钮时，URL 更改为 localhost:3000/test，但页面上的内容仍然是 welcome.html，没有任何 lorem ipsum 页面，只有 URL 是好的，但是内容没有重新生成。控制台未显示任何错误。我的代码与来自 Github 的 DeborahK 非常相似(她的代码正在运行)，我在这个问题上花了很多时间 - HOW TO ROUTE INSIDE COMPONENT 现在我不知道我是什么做错了。

谢谢大家

最佳答案

不要添加 providers: [ROUTER_PROVIDERS],不止一次而且只在bootstrap()或根组件，但不在任何其他组件上。

添加ROUTER_PROVIDERS不止一次中断路由。

新的 RC.3 路由器需要 ROUTER_PROVIDERS在 bootstrap() 。不支持将其添加到根组件。

关于html - 组件内的 routerLink 不生成内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36570899/

25 4 0
文章推荐： javascript - 如何在 AngularJS 的 GridList(动态磁贴)中使用换行符
文章推荐： java - Java的Runtime.maxMemory()什么时候会返回Long.MAX_VALUE？
文章推荐： java - if条件下的json查询
文章推荐： c++ - 在 visual studio : libboost_regex-vc120-mt-sgd-1_59. lib(instances.obj) 中使用内置的 boost 库时:错误 LNK2038:检测到不匹配
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com