文章/答案/技术大牛

发布

社区首页 >问答首页 >链接更改后不呈现正确的html

问链接更改后不呈现正确的html
EN

Stack Overflow用户

提问于 2019-07-05 18:28:02

回答 3查看 159关注 0票数 0

我是新来的，所以请容忍我。

我的admin-documentaries.component.html有以下文本：<p>admin-documentaries works!</p>

我的admin- has .Component.html有以下文本：

<p>admin-home works!</p>


<a [routerLink]="['/admin/home']" routerLinkActive="active">
    Home
  </a>
<a [routerLink]="['/admin/documentaries']" routerLinkActive="active">
    Documentaries
</a>
<a [routerLink]="['/admin/comments']" routerLinkActive="active">
    Comments
</a>
<a [routerLink]="['/admin/users']" routerLinkActive="active">
    Users
</a>
<a [routerLink]="['/admin/activity']" routerLinkActive="active">
    Activity
</a>

然而，当我点击纪录片时，文本将作为管理员主页保存。

图像

admin-documentaries.component.ts

import { DocumentaryService } from './../../services/documentary.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-admin-documentaries',
  templateUrl: './admin-documentaries.component.html',
  styleUrls: ['./admin-documentaries.component.css']
})
export class AdminDocumentariesComponent implements OnInit {

  constructor(private service: DocumentaryService) { }

  ngOnInit() {
    let documentaries = this.service.getAll().subscribe();
    console.log(documentaries);
  }

}

app-routing.module.ts

import { AdminDocumentariesComponent } from './admin/admin-documentaries/admin-documentaries.component';
import { AdminHomeComponent } from './admin/admin-home/admin-home.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {path: 'admin', component: AdminHomeComponent,
    children: [
      { path: 'documentaries', component: AdminDocumentariesComponent },
    ]
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<app-navbar></app-navbar>
<h2><router-outlet></router-outlet> </h2>

谢谢

错误：

ERROR <unavailable> vendor.js:44758:33
    defaultErrorLogger http://localhost:4200/vendor.js:44758
    handleError http://localhost:4200/vendor.js:44810
    next http://localhost:4200/vendor.js:69185
    schedulerFn http://localhost:4200/vendor.js:65417
    __tryOrUnsub http://localhost:4200/vendor.js:90109
    next http://localhost:4200/vendor.js:90048
    _next http://localhost:4200/vendor.js:89996
    next http://localhost:4200/vendor.js:89973
    next http://localhost:4200/vendor.js:89759
    emit http://localhost:4200/vendor.js:65379
    onHandleError http://localhost:4200/vendor.js:68514
    invoke http://localhost:4200/polyfills.js:3208
    run http://localhost:4200/polyfills.js:2973
    runOutsideAngular http://localhost:4200/vendor.js:68401
    onHandleError http://localhost:4200/vendor.js:68511
    handleError http://localhost:4200/polyfills.js:3212
    runGuarded http://localhost:4200/polyfills.js:2986
    microtaskDrainDone http://localhost:4200/polyfills.js:3512
    drainMicroTaskQueue http://localhost:4200/polyfills.js:3415
    invokeTask http://localhost:4200/polyfills.js:3318
    invokeTask http://localhost:4200/polyfills.js:4452
    globalZoneAwareCallback http://localhost:4200/polyfills.js:4478

编辑

当我移除

<a [routerLink]="['/admin/home']" routerLinkActive="active">
    Home
  </a>
<a [routerLink]="['/admin/documentaries']" routerLinkActive="active">
    Documentaries
</a>
<a [routerLink]="['/admin/comments']" routerLinkActive="active">
    Comments
</a>
<a [routerLink]="['/admin/users']" routerLinkActive="active">
    Users
</a>
<a [routerLink]="['/admin/activity']" routerLinkActive="active">
    Activity
</a>

并将其替换为<router-outlet></router-outlet>，我得到以下内容：行政纪录片

angular

回答 3

Stack Overflow用户

发布于 2019-07-05 18:50:59

问题可能不是因为这一点，而是因为对代码的更正。[routerLink]用于绑定，但您不是绑定，而是将字符串用于路由器链接。

<a routerLink="/admin/home" routerLinkActive="active">
    Home
  </a>
<a routerLink="/admin/documentaries" routerLinkActive="active">
    Documentaries
</a>
<a routerLink="/admin/comments" routerLinkActive="active">
    Comments
</a>
<a routerLink="/admin/users" routerLinkActive="active">
    Users
</a>
<a routerLink="/admin/activity" routerLinkActive="active">
    Activity
</a>

票数 0

Stack Overflow用户

发布于 2019-07-05 19:02:21

更改订阅：

ngOnInit() {

 this.service.getAll().subscribe(
result => {
  this.documentaries = result;
  console.log(documentaries);
}
);}

另外，在ngOnInit之外声明变量“文档”

 public documentaries;


 constructor( ....

票数 0

Stack Overflow用户

发布于 2019-07-06 09:11:22

这里的问题是您还没有为您的router-outlet路由添加一个admin来显示它的子路由。这就是为什么当您在admin-home.component.html中使用admin-home.component.html替换链接并在浏览器中导航到/admin/documentaries时，您将看到所显示的管理文档。

在您的应用程序中，AppComponent是您拥有app-navbar的应用程序外壳，以及路由器在页面上和页面上交换组件的router-outlet。当AdminHomeComponent加载到AppComponent的router-outlet中时，因为它有子路由，因此需要向父路由的模板中添加一个router-outlet，以显示它们，即AdminHomeComponent模板。

下面是相同的斯塔克布利茨上的一个示例。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56907793

复制

相似问题

问链接更改后不呈现正确的html
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问链接更改后不呈现正确的htmlEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问链接更改后不呈现正确的html
EN