Question

我是Angular的新手，请多多包涵。

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

我的admin-home.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>

但是，当我单击“纪录片”时，文本仍保留为管理员主页。

Image

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>，我得到以下信息： admin documentaries

Answer 1

问题可能不在于此，而是对您的代码的更正。 <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>用于绑定，但您未绑定并且使用字符串作为路由器链接。

if($_SERVER["REQUEST_METHOD"] == "POST" ){
    if(!empty($_POST)){

        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "data";

        $conn = new mysqli($servername, $username, $password, $dbname);

        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        $sql = "INSERT INTO cases (name, email, case, phone, address) VALUES ('{$conn->real_escape_string($_POST['name'])}', '{$conn->real_escape_string($_POST['email'])}',
        '{$conn->real_escape_string($_POST['message'])}', '{$conn->real_escape_string($_POST['phone'])}', '{$conn->real_escape_string($_POST['address'])}')";
        $insert = $conn->query($sql);

        $conn -> close();
    });

Answer 2

更改您的订阅：

ngOnInit() {

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

还要在ngOnInit之外声明变量“ documentaries”

 public documentaries;


 constructor( ....

Answer 3

这里的问题是您尚未为router-outlet路由添加admin来显示其子路由。这就是为什么当您在router-outlet中用admin-home.component.html替换链接并在浏览器中导航到/admin/documentaries时，看到显示的管理文档的原因。

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

这里是Stackblitz上的一个例子。

更改链接后，Angular无法呈现正确的html

3 个答案: