Fatal编程技术网

Javascript 角度2-布线不工作

javascript html angular routing

Javascript 角度2-布线不工作,javascript,html,angular,routing,Javascript,Html,Angular,Routing,我尝试建立一个有4个链接的菜单。每个链接都应该指向一个html <p> <a routerLink="/function">Business Function</a> <a routerLink="/process">Business Process</a> <a routerLink="/appsystem">Appsystem</a> <a routerLink="/applicatio

我尝试建立一个有4个链接的菜单。每个链接都应该指向一个
html

<p>
  <a routerLink="/function">Business Function</a>
  <a routerLink="/process">Business Process</a>
  <a routerLink="/appsystem">Appsystem</a>
  <a routerLink="/application">Application</a>
</p>

<body>

    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-color">
          <!-- <a class="navbar-brand" href="#">Navbar</a> -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse navbar-adjustment" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item activ-link">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/function">Business Funciton</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/process">Business Process</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/appsystem">Appsystem</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="/application">Application</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search">
              <button class="btn btn-style my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </header>

      <router-outlet></router-outlet>
      <app-root></app-root>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
  crossorigin="anonymous"></script>

</body>
例如，当我尝试访问
html
BusinessFunctionComponent
时，它仍然显示相同的站点，尽管它显示了正确的URL

业务功能。ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-business-function',
  templateUrl: './business-function.component.html',
  styleUrls: ['./business-function.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class BusinessFunctionComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
有人能帮我解决这个问题吗，因为我是新手？ 到目前为止谢谢你

编辑：

我将链接移动到
index.html
中的导航栏

<p>
  <a routerLink="/function">Business Function</a>
  <a routerLink="/process">Business Process</a>
  <a routerLink="/appsystem">Appsystem</a>
  <a routerLink="/application">Application</a>
</p>

<body>

    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-color">
          <!-- <a class="navbar-brand" href="#">Navbar</a> -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse navbar-adjustment" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item activ-link">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/function">Business Funciton</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/process">Business Process</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/appsystem">Appsystem</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="/application">Application</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search">
              <button class="btn btn-style my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </header>

      <router-outlet></router-outlet>
      <app-root></app-root>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
  crossorigin="anonymous"></script>

</body>



    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 


搜寻
将以下代码添加到主HTML或应用程序组件HTML中

 <router-outlet></router-outlet>
路由组件将显示在此处。

将以下代码添加到主HTML或应用程序组件HTML中

 <router-outlet></router-outlet>

 <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-color">
          <!-- <a class="navbar-brand" href="#">Navbar</a> -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse navbar-adjustment" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item activ-link">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/function">Business Funciton</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/process">Business Process</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/appsystem">Appsystem</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="/application">Application</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search">
              <button class="btn btn-style my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </header>
      <router-outlet></router-outlet>
路由组件将显示在此处。



 <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-color">
          <!-- <a class="navbar-brand" href="#">Navbar</a> -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse navbar-adjustment" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item activ-link">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/function">Business Funciton</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/process">Business Process</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/appsystem">Appsystem</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="/application">Application</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search">
              <button class="btn btn-style my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </header>
      <router-outlet></router-outlet>



    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 


搜寻
将此移动到您的
app.component.html



    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 


搜寻
将此移动到您的
app.component.html

是否在
RouterModule
中注册了所有路由？是，请参见上文。我想你是指我在问题中发布的
app.routing.ts
的这部分，对吗？你是否在
RouterModule
中注册了所有路由？是的，见上文。我猜你指的是我在问题中发布的app.routing.ts的这部分，对吧？谢谢，这很有效！！我在代码中做了一个简单的更改。我将路由器链接移到位于
index.html
中的导航栏中。我也添加了
路由器插座
，它不再工作了。见我的编辑上面。你有什么想法吗？index.html与任何组件都没有关联。路由器出口只能用于在app.module.ts app.component中定义的组件。建议编辑以创建标头组件并在header.html中复制代码，然后在app.component.html中复制应用根目录下的代码。添加应用程序标头和路由器出口或直接将代码添加到app-component.htmlok谢谢。到目前为止，我解决了这个问题，并将其复制到我的app.component中。但我会记住创建一个应用程序标题谢谢你这是工作！！我在代码中做了一个简单的更改。我将路由器链接移到位于
index.html
中的导航栏中。我也添加了
路由器插座
，它不再工作了。见我的编辑上面。你有什么想法吗？index.html与任何组件都没有关联。路由器出口只能用于在app.module.ts app.component中定义的组件。建议编辑以创建标头组件并在header.html中复制代码，然后在app.component.html中复制应用根目录下的代码。添加应用程序标头和路由器出口或直接将代码添加到app-component.htmlok谢谢。到目前为止，我解决了这个问题，并将其复制到我的app.component中。但是我会记住创建一个应用程序标题你应该在链接上使用routerLink而不是href。使用href将重新加载您的页面。这是api并从htmlI中删除所有href。我很乐意提供帮助：）您应该在链接上使用routerLink而不是href。使用href将重新加载您的页面。这是api并从htmlI中删除所有href。我很乐意提供帮助：）