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

Question

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

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

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

并尝试像这样使用handlebars 渲染组件：

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' })

Answer 1

不确定为什么要从 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

希望这有助于一切顺利！