时间戳

首页 > 解决方案 > 如何从节点快递渲染角度组件

javascript - 如何从节点快递渲染角度组件

问题描述

我正在使用 GET 请求访问 url：http://localhost:5029/article/16

在节点内部，我正在检查article/16如下：

req.url.split("article/")[1];

并尝试使用这样的把手来渲染组件：

res.render('header', {layout: 'header.component.html'});

我看到渲染的组件，但未加载 css 样式。

我的组件.ts：

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit { }

组件html：

<div class="header">
  <li class="menu-item">
    <a [routerLinkActive]="['active']" routerLink="/home">Home</a>
  </li>
  <li class="menu-item">
    <div class="dropdown">
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" [routerLinkActive]="['active']">Tutorials</button>
    </div>
  </li>
</div>

车把设置：

app.engine(
  "hbs",
  hbs({
    extname: "html",
    defaultView: "default",
    layoutsDir:  "../src/app/components/header/",
    partialsDir: "../src/app/components/"
  })
);

app.set("view engine", "hbs");

RiotJS 中也实现了类似的要求：

https://riot.js.org/api/#-riotrendertagname-opts

// render "my-tag" to html
var mytag = require('my-tag')
riot.render(mytag, { foo: 'bar' })

标签： javascriptnode.jsangularexpressangular6

解决方案

不确定为什么要从 node express 渲染特定的 Angular 组件，但我会尝试解释什么是组件以及为什么不能直接加载它们以及更好的替代方法。

您可能已经知道，装饰器使特定的代码块区分服务、组件、指令等。

装饰器是使用前缀 @ 符号调用并紧跟类、参数、方法或属性的函数。

例如

@Component({
})
export class TestComponent {}

@Injectable()
export class TestService {}

注意@Component 或@Injectable 中的 ()。（这些装饰器需要在某些或其他 ngModule() 中注册）

这意味着一旦 JavaScript 遇到 @Component()，就会调用 @Component。反过来，这意味着某处必须有一个组件函数，该函数返回一个与上述装饰器签名之一匹配的函数。这是装饰器工厂模式的一个示例。

在应用程序的 Bootstrap 过程中，所有这些函数都被调用，编译器将 ts 代码转换为 vanilla js，在浏览器中执行。

回到你试图做的问题是尝试加载组件而不使用 TS 编译器处理它，（在引擎盖下，当我们构建或编译应用程序时，Angular 为我们做了很多工作）

可能的解决方案，如果您不想在 Angular 的帮助下为所有组件提供服务，您可以使用 Angular Element（Angular 元素是打包为自定义元素的 Angular 组件，一种以与框架无关的方式定义新 HTML 元素的 Web 标准） ，可以在任何页面上直接渲染而无需角度。

要了解有关同一访问的更多信息https://angular.io/guide/elements

希望这有助于一切顺利！

推荐阅读