直接从 html DOM 路由到 Component

Question

尝试从 html 的模板路由到组件，我尝试了不同的方法，但它们不起作用。

我可以在组件之间路由，从 html 到模板或 urlTemplate（在脚本标签中设置它的值）。但我无法从 html 链接到组件。

这是一个想法：

index.html

<a href="my_angular_component">My_something</a>

my_component.ts

@Component({
  selector: 'myComponent-list',
  template: `
    <h2>myComponents</h2>

    <ul>
      <li *ngFor="let myComponent of myComponents">
        {{myComponent.name}}
      </li>
    </ul>
  `,
  directives: [ROUTER_DIRECTIVES]
})

我尝试了以下方法：

使用路由的组件和 [routerLink] 属性：

routes.ts

export const MyComponentAppRoutes = [
  { path: 'myComponent', component: my_component },
]

index.html

<a [routerLink]="['/myComponent']">My_something</a>

不工作，因为我不能直接在 html 中使用 routerLink。

另一种，直接从html通过脚本定义路由提供者：

<script>
        var app = angular.module("HelloWorld", ["ngRoute"]);
        app.config(function($routeProvider) {
            $routeProvider
                .when("/cartelera", {
-- HOW CAN CALL MY COMPONENT HERE? NOT TEMPLATE DIRECTLY BECAUSE I WANT TO INJECT A SERVICE.
-- NOT A URLTEMPLATE FOR THE SAME REASON.
                });
            });
        </script>

最后，我定义了一个名为 mylink 的组件，只是为了使用自己定义的 routeLink，但是，如果它起作用，看起来不正确。我是否必须为我拥有的每个链接定义一个组件？

我听不懂。 :S

谢谢朋友... :)

Answer 1

你不能。执行此代码时，Angular 尚未运行。

您可以为window.someName 赋值，然后从组件中读取window.someName。

如果实际上在 Angular 之后调用了 function($routeProvider) { ... } 并且您的组件已初始化，您可以将组件的方法分配给 window.someName，而不是从脚本标签调用 window.someName(someParam)

另见Angular2 - how to call component function from outside the app

另一种方法是事件

从你的脚本方法

var event = new Event('my-event');
// or
var event = new CustomEvent('my-event', {'detail': someData});
window.dispatchEvent(event);

在你的 Angular 组件中

@HostListener('window:my-event', ['$event'])
myEventHandler(event) {
  console.log(event);
  // or
  console.log(event.detail);
}

另见https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events