Question

在index.html中，我定义了结构页面。

scrollBar

在我的app.component中，我定义了unorodered列表。

Slider

如何在角度4中将这些ul元素注入索引中的nav元素？它是否与app.component.ts中的选择器连接？

<body>
  <app-root>
    <header></header>
    <nav></nav>
    <section></section>
    <aside></aside>
    <footer></footer>
  </app-root>
</body>

Answer 1

解决方案1 

为无序列表创建新组件。
使用选择器<nav-component></nav-component>注入该组件。

解决方案2 - 创建全局变量并将列出的文本存储为JSON对象。

示例：

let nav=[{name :'Strona główna', url:'../bla/bla'},
        {name :'O Nas', url:'../bla/bla'}
        {name :'Historia', url:'../bla/bla'}]

通过app.service
使用此数据生成动态无序列表。

例如：<ul><li "ngfor a in nav"> {{ a.name }}</li></ul>

Answer 2

您错放了HTML。您在<app-root></app-root>中指定的HTML应移至文件app.component.html，并且您指定的列表也应按原样插入该文件中：

的index.html：

<body>
  <app-root></app-root>
</body>

app.component.html：

<header></header>
<nav>
  <ul>
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">O Nas</a></li>
    <li><a href="#">Historia</a></li>
    <li><a href="#">Dokumenty</a></li>
    <li><a href="#">Galeria</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>
<section></section>
<aside></aside>
<footer></footer>

将app组件中的无序列表放入index.html中的nav元素中

2 个答案: