【问题标题】:Angular routes doesnt change角度路线不会改变
【发布时间】:2021-04-06 20:39:45
【问题描述】:

我在将一个组件加载到另一个组件中时遇到问题。它只是不显示,但在浏览器中路由发生了变化,但我的组件没有更新......

所以我有:

--homepage
--coins--
       --coinspreview  <-- i cannot access this component;
--services

app-component.html

<app-homepage>
</app-homepage>

app-homepage.html


<section id="home">
  <div class="bg">
    <img class="my-bg" src="/assets/images/bg.jpg">
  </div>
  <div class="container middle">
  <div class="row">
    <div class="col-lg-12 col-sm-12 col-12">
      <div class="hero">
       <h4 class="hero-title">
         Top 100 Cryptocurrency
       </h4>
      </div>
    </div>
  </div>
</div>
</section>

<section id="coins">
<app-coins></app-coins>

//here it shows my another component
</section>

app-coins.html

 <div class="container">
          <div class="row justify-content-center align-items-center">
            <div class="col-lg-3 col-md-4 col-sm-6 col-6" *ngFor="let coin of coins$ | async">
              <div class="main" [routerLink]="['./coins/coins-preview']">
              <img class="mini" src="{{coin.image}}" alt="{{coin.name}}" />
              <div class="name">{{coin.name}}</div>

              <div class="prices">
                <p class="coin-price">
                 Pret actual: {{coin.current_price}}
                </p>
                <p class="coin-market-cap">
                  Capitalizare: {{coin.market_cap}}
                </p>
              </div>
            </div>
            </div>
          </div>
      </div>

这是我在 app-routing-module 中的所有路由。

const routes: Routes = [
  {
    path: '',
    redirectTo: 'homepage',
    pathMatch: 'full'
  },
  {
    path: 'homepage',
    component: HomepageComponent
  },
  {
    path: "coins",
    component: CoinsComponent,
    children: [
             {
               path: "coins/coins-preview",
               component: CoinsPreviewComponent
             }
             ]
  }
];

我不知道还能做什么.. 我被卡住了,但我不明白为什么它不加载????

【问题讨论】:

  • 我认为您不需要在子数组中添加完整路径,只需添加父路径的相对路径即可。

标签: html angular typescript


【解决方案1】:

定义子路由时不要重复父路由名称。这应该使它工作

【讨论】:

  • No.. 我的猜测是 coin-preview 在 app-homepage -> 在 app-coin 内,因此无法炫耀。
  • 可以修改子路由名称,然后在 coin 组件中添加 router-outlet 来渲染 coin 预览
  • 并且在 routerlink domt 中,在路由前面添加点,当您使用属性绑定时,它应该是数组形式,每个路由单独 ['parent','child]
猜你喜欢
  • 2016-10-26
  • 1970-01-01
  • 2019-03-10
  • 1970-01-01
  • 1970-01-01
  • 2018-05-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多