【问题标题】:Pass data from html body to root component将数据从 html 正文传递到根组件
【发布时间】:2016-12-15 01:10:38
【问题描述】:

我一直在尝试将数据从主布局 index.html 文件传递​​到角度根/起始组件<my-app>。不幸的是,我无法像这样传递它们:<my-app [bodyData]="'passed'" ></my-app> from my index.html。

谁能帮助我如何通过它们?提供了一个测试链接。

Plunker Test App Link

【问题讨论】:

  • 您可以在App 组件中创建一个服务并从该服务中获取数据

标签: angular typescript


【解决方案1】:

正如@Thierry 上面所说,他提出的方法仅对传递字符串属性有效。下面是一种方法,您可以通过该方法传入具有已定义属性的对象。

为要传递的数据创建一个类。

appdata.ts

export class AppData {
  public isServerRunning: boolean;
  public isDataFromMemory: boolean;
}

在包含您的启动数据的窗口对象上定义一个实例

index.html

<script>window.APP_DATA = { isServerRunning: false, isDataFromMemory: false }

告诉引导代码。

main.tss

import { AppData } from './app/appdata';

通过服务向您的组件提供数据

app.module.ts

import { AppData } from './appdata';
...
providers: [AppData,
{
  provide: AppData,
  useValue: window['APP_DATA']
}
],

从组件访问数据

app.component.ts

constructor(appData:AppData) {
    console.log('AppComponent - ', appData);
}

【讨论】:

  • 感谢您花时间写这篇文章。这是一个优雅的解决方案,而且效果很好。
  • @John Pankowicz 如何将数据从组件传递到 index.html?
  • @federer 因为我们可以读取窗口对象的属性,我想我们也可以写入一个。我没试过。你?虽然我不确定你为什么要这样做。
【解决方案2】:

属性绑定不适用于根组件,即您引导的组件。

这不起作用的原因是您放置的 index.html 不是角度组件。因此,Angular 不会编译这个元素。 Angular 不会在运行时读取属性值,只会在编译时读取,否则我们会受到性能影响。 (托拜厄斯·博世)

看到这个问题:

一种解决方法是利用 DOM:

<my-app bodyData="passed" ></my-app>

在组件中:

@Component({
  selector: 'my-app',
  template: `
    (...)
  `
})
export class MyAppComponent {
  constructor(private eltRef:ElementRef) {
    let prop = eltRef.getAttribute('bodyData');
  }
}

这仅适用于字符串属性...

【讨论】:

  • 我收到一个编译错误“[ts] Property getAttribute does not exist on type ElementRef”。
  • 但是我可以通过使用@Ratnam 的技术来避免错误,首先获取nativeElement 然后使用getAttribute。
【解决方案3】:

我尝试过同样的场景。但我得到的值为 null。

在我的 HTML 中,我有标签

<my-app myattr="passed" >Loading ..</my-app>    

在我使用过的组件中

constructor(private _elementRef: ElementRef){
    let native = this._elementRef.nativeElement;
    let test = native.getAttribute("myattr");
    alert(test);
}   

那个警报值是空的

【讨论】:

    【解决方案4】:

    复活早已死去的话题总是很可爱的。这是我的解决方案。我在index.html中使用了localStorage

    <script>
          localStorage.setItem('startpath', window.location.pathname);
    </script>
    

    然后在app.component 简单地说:

    ngOnInit() {
    
        var startpath = localStorage.getItem('startpath');
        if (startpath) {
            localStorage.removeItem('startpath');
            this._router.navigate([startpath]);
        } else
            this._router.navigate(['/dashboard']);
    }
    

    【讨论】:

    • 你到底为什么要这么做?默认情况下,Angular 路由器应该为您导航...
    猜你喜欢
    • 1970-01-01
    • 2019-05-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-10
    • 2019-11-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多