Question

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

在节点内部，我正在像这样检查article/16：

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

，并尝试使用handlebars渲染组件，如下所示：

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

我看到了呈现的组件，但未加载CSS样式。

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

在应用程序的Bootstrap中，所有这些功能都将被调用，并且编译器会在浏览器中执行的普通js中转换ts代码。

回到问题所在，您试图在不使用TS编译器进行处理的情况下加载组件，（实际上，在构建或编译应用程序时，angular为我们做了很多工作）

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

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

希望这对您有帮助！

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

1 个答案: