我正在使用GET请求访问URL：http：// localhost：5029 / article / 16
在内部节点我正在检查文章/ 16像这样：
req.url.split( “文章/”)[1];
并尝试使用handlebars渲染组件,如下所示：
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：
把手设置：
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' })
最佳答案
不确定为什么要从node express渲染特定的Angular组件,但我会尝试解释哪些组件是什么以及为什么不能直接加载它们以及更好的替代方法.
正如您可能已经意识到的那样,装饰器使特定的代码块区分服务,组件,指令等.
装饰器是使用带前缀的@符号调用的函数,紧接着是类,参数,方法或属性.
例如
@Component({
})
export class TestComponent {}
@Injectable()
export class TestService {}
注意@Component或@Injectable中的().
(这些装饰器需要在某些或其他ngModule()中注册)
这意味着一旦JavaScript遇到@Component(),就会调用@Component.反过来,这意味着某处必须有一个Component函数返回一个匹配上面提到的装饰器签名的函数.这是装饰工厂模式的一个例子.
在应用程序的Bootstrap期间,调用所有这些函数,编译器转换在浏览器中执行的vanilla js中的ts代码.
回到问题,你试图做的是尝试加载组件而不用TS编译器处理它(引擎盖下,当我们构建或编译应用程序时,angular为我们做了很多工作)
可能的解决方案,如果您不想在角度的帮助下提供所有组件,您可以使用Angular元素(Angular元素是打包为自定义元素的Angular组件,用于以框架无关的方式定义新HTML元素的Web标准),可以直接在任何页面上呈现而无需角度.
要了解有关相同内容的更多信息,请访问https://angular.io/guide/elements
希望这有助于一切顺利！
@H_403_67@