如何从节点表达渲染角度分量

Question

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

我正在检查article/16这样的内部节点:

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

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

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

我看到渲染的组件,但没有加载CSS样式.

我的组件:

@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。反过来，这意味着某个地方必须有一个 Component 函数，该函数返回与上面概述的装饰器签名之一匹配的函数。这是装饰器工厂模式的一个示例。

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

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

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

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

希望这对一切都有帮助！