Question

我的导航栏代码对于所有页面都是相同的......所以我在index.html中包含了navbar的HTML，在angular 4 src目录的styles.css中包含了样式，但是我在哪里编写了这个索引的typescript代码.html文件。我需要在单击＃nav-icon元素时调用iconAnimate（）函数。

以下是我的代码

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wiz</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--Bootstrap CDN -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" id="logo-container">
    <img src="../../../assets/images/logo.png" id="logo">
    <div (click)="iconAnimate()" id="nav-icon">
      <span></span>
      <span></span>
      <span></span>
    </div>
</div>

<app-home></app-home>

</body>
</html>

Answer 1

Angular 4推荐基于组件的架构。所以，每件事都应该是一个组件（一个组件应该有自己的HTML，CSS，Typescript）。因为，您在索引文件中使用app-home组件。我假设你有app-home组件（.css，.html，.ts文件）。将navbar html放在app-home.html中，然后在app-home.ts中添加click事件。

PS：如果你是角度2/4的新手，请使用棱角分明。

Answer 2

为了您的目的，最好使用app.component.html文件来放置该代码。默认情况下，此组件会在应用程序运行后显示，因此请将导航栏HTML代码放在其中，并在app.component.ts文件中放置相应的Typescript代码。如果您希望点击方法有效，您可能希望将动画的代码放在app.component.css文件中的div上。

最好在styles.css中导入您的Bootstrap代码，但是如果您想要包含CDN的HTML参考，请在app.component.html中弹出。

Answer 3

您应该使用自己的（typescript）组件（如控制器）将所有内容都设置为组件模板。

在索引上，尝试将您的应用加载到：<app-root></app-root> ...

我认为你有点不对劲。查看Angular 4的文档或教程。它将阐明我的意思！

我应该在哪里为angular4中的index.html编写typescript代码

3 个答案: