Как визуализировать угловой компонент из узла экспресс - PullRequest
Новая
       6

Как визуализировать угловой компонент из узла экспресс

0 голосов
/ 22 января 2019

Я нажимаю на ссылку с запросом GET: http://localhost:5029/article/16

и внутри узла я проверяю на article/16 вот так:

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

и пытается отобразить компонент, используя руль , например:

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

Я вижу, что компонент отображается, но стили CSS не загружены.

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

1 Ответ

0 голосов
/ 28 января 2019

Не знаю, почему вы хотите визуализировать определенный компонент Angular из узла express, но я постараюсь объяснить, что это за компоненты, и почему вы не можете напрямую их загрузить и лучшую альтернативу для них.

Как вы, возможно, уже знаете, Decorators различает определенный блок кода между службой, компонентом, директивой и т. Д.

Декораторы - это функции, которые вызываются с префиксом @ и сразу после класса, параметра, метода или свойства.

Например, 

@Component({
})
export class TestComponent {}

@Injectable()
export class TestService {}

Обратите внимание на () @Component или @Injectable. (Этим декораторам нужно зарегистрироваться в том или ином ngModule ())

Это означает, что @Component вызывается, когда JavaScript встречает @Component (). В свою очередь это означает, что где-то должна быть функция Component, которая возвращает функцию, соответствующую одной из сигнатур декоратора, описанных выше. Это пример фабричного шаблона декоратора.

Во время начальной загрузки приложения все эти функции вызываются, и компилятор преобразует код ts в vanilla js, который выполняется в браузере.

Возвращаясь к вопросу, что вы пытаетесь сделать, это пытаться загрузить компонент, не обрабатывая его с помощью компилятора TS (под капотом angular делает для нас много работы, когда мы создаем или компилируем приложение)

Возможное решение: если вы не хотите обслуживать все компоненты с помощью angular, вы можете использовать Angular Element (угловые элементы - это угловые компоненты, упакованные как пользовательские элементы, веб-стандарт для определения новых элементов HTML в framework- агностическим способом), который можно визуализировать без необходимости угловых прямо на любой странице.

Чтобы узнать больше об этом же посещении https://angular.io/guide/elements

Надеюсь, это поможет вам всего наилучшего!

...