<app-root>在ionic项目中的作用是什么

joh*_*son 2 ionic-framework angular

我在 ionic 中运行了一个空白项目并使其工作正常。现在我正在尝试了解代码的工作。该程序中的作用是什么。我是 ionic 的新手。请详细向我解释。在 index.html 文件中找到

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>

  <base href="/" />

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

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

</html>
~
Run Code Online (Sandbox Code Playgroud)

小智 5

Angular 是一个单页应用程序框架!这是什么意思 ?这意味着单个index.html页面将在您的整个项目中呈现。它是如何工作的单页应用程序?在index.html你可以找到的<app-root>标签中,这个标签是app.component.ts文件的选择器,如果你去文件,你可以看到@Component装饰器中的选择器、模板、样式,基本上装饰器中的所有文件都将被渲染并放置在app-root标签内。需要注意的一件事是,app.module.ts如果您不导入AppComponent它,您的项目将不会运行,因为它的工作原理是这样的, index.html --> app.module --> component因为您看到模块查找带有该标记的组件,如果找到则重定向到该组件,并且找到的所有内容都将在 index.html 中呈现。 html