Question

我在heroku上托管了我的应用程序。当我改变路由器时，页面将加载新组件，但不会删除前一个路由器的最后一个组件。

这是我的路由器，我的appcomponent文件中有路由器插座。

const appRoutes: Routes = [
    {
        path:  'home',
        component: HomeComponent
    },
    {
        path: 'jokes/:title',
        component: JokeDetailComponent
    },
    {
        path: 'signup',
        component: RegisterComponent,
        canActivate: [NonauthService]
    },
    {
        path: 'newpost',
        component: NewPostComponent
    },
    {
        path: 'logout',
        redirectTo: ''
    },
    {
        path: 'verify/:id',
        component: VerifyComponent
    },
    {
        path: 'login',
        component: LoginComponent,
        canActivate: [NonauthService]
    },
    {
        path: 'profile/:username',
        component: ProfileComponent
    },
    {
        path: '**',
        redirectTo: '/home'
    }
];

这是我的viewDetail按钮

<div class="row">
    <div class="col-sm-6" *ngFor="let joke of jokes">
        <div class="card text-center">
            <div class="card-body">
                <h4 class="card-title">{{ joke.title }}</h4>
                <p class="card-text">{{ joke.content.substring(0,joke.content.length/2)}}...</p>
                <a [routerLink]="['/jokes/',joke.ref]" class="btn btn-primary">View Detail</a>
            </div>
        </div>
    </div>
</div>

这是我的登录/注册码：

<ul class="nav justify-content-end">
            <li class="nav-item "  *ngIf= "!authService.loggedIn()" routerLinkActive = "active" [routerLinkActiveOptions] = "{exact:true}">
                <a class="nav-link" routerLink = "/login">Login</a>
            </li>
            <li class="nav-item " *ngIf= "!authService.loggedIn()" routerLinkActive = "active" [routerLinkActiveOptions] = "{exact:true}">
                <a class="nav-link" routerLink = "/signup">Signup</a>
            </li>
            <li class="nav-item "  *ngIf= "authService.loggedIn()" routerLinkActive = "active" [routerLinkActiveOptions] = "{exact:true}">
                <a class="nav-link" routerLink = "/profile/{{authService.username}}">{{authService.username}}</a>
            </li>
            <li class="nav-item "  *ngIf= "authService.loggedIn()" routerLinkActive = "active" [routerLinkActiveOptions] = "{exact:true}">
                <a class="nav-link" routerLink = "/logout" (click)="onLogOut()" >Logout</a>
            </li>
        </ul>

所以当我去jokes / sometitle时，它应该只加载jokeDetailComponent。但是它没有，它仍然会保留以前路由器中的旧组件。

奇怪的是，如果您不点击viewDetail按钮，登录和注册路由器的工作完全正常。但是，viewDetail按钮与login和signup路由器具有相同的实现，它们的工作方式应该相同。

您可以在此链接上对其进行测试：https://happierday.herokuapp.com，你可以先点击viewdetail以外的按钮，它们按预期工作。然后尝试viewdetail按钮。

事情是它在开发中完美运行，但是当它在heroku上运行时，它会启动所有问题。我真的需要帮助，我已经花了几个小时做这件事。

Answer 1

检查浏览器控制台，我看到此错误：

ERROR TypeError: Cannot read property 'title' of undefined
    at Object.eval [as updateRenderer] (JokeDetailComponent.html:4)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13105)
    at checkAndUpdateView (core.es5.js:12256)
    at callViewAction (core.es5.js:12599)
    at execComponentViewsAction (core.es5.js:12531)
    at checkAndUpdateView (core.es5.js:12257)
    at callViewAction (core.es5.js:12599)
    at execEmbeddedViewsAction (core.es5.js:12557)
    at checkAndUpdateView (core.es5.js:12252)
    at callViewAction (core.es5.js:12599)

当路由器加载组件时，您的joke变量未定义。在访问其属性之前尝试检查它的存在（通过在变量和属性之间添加?），如下所示：

<div class="col-sm-6" *ngFor="let joke of jokes">
    <div class="card text-center">
        <div class="card-body">
            <h4 class="card-title">{{ joke?.title }}</h4>
            <p class="card-text">{{ joke?.content.substring(0,joke.content.length/2)}}...</p>
            <a [routerLink]="['/jokes/',joke.ref]" class="btn btn-primary">View Detail</a>
        </div>
    </div>

Answer 2

错误可能来自您的app.component.html文件。

当您使用路由时，您不必声明每个组件，但是juste用以下内容替换组件位置：

<router-outlet></router-outlet>

Angular完成工作，将请求的组件加载到router-outlet

角度4路由不会刷新页面？

2 个答案: