cari

Rumah  >  Soal Jawab  >  teks badan

Masalah dengan menggunakan Anguar untuk menulis benang rendering dalam Electron

Hello semua:

Saya mahu menggunakan rangka kerja sudut dalam benang rendering elektron, tetapi saya tidak mahu membungkus kod dengan webpack, kerana benang rendering elektron juga menyokong sintaks commonJS, jadi saya hanya mahu menukar Typescript kepada commonJS tanpa pembungkusan , dan kemudian menggunakannya secara langsung dalam index. Berikut adalah proses pelaksanaan saya

Mula-mula saya mencipta 3 fail ts

  1. app.component.ts

    import { Component } from '@angular/core'
@Component({
  selector: 'my-app' ,
  template: '<input type="text" [(ngModel)]="name" /><h1>Hello {{name}}</h1>'
})
export class AppComponent { name = 'Aungtcs' }

  2. app.module.ts

    import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'
@NgModule ({
  imports: [
    FormsModule ,
    BrowserModule
  ] ,
  declarations: [
    AppComponent
  ] ,
  bootstrap: [
    AppComponent
  ] ,
  exports: [
    AppComponent
  ]
})
export class AppModel {  }

  3. utama.ts

    import 'core-js/es7'
import 'zone.js'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModel } from './app/app.module'
platformBrowserDynamic().bootstrapModule(AppModel)

Kemudian gunakan tsc untuk menyusun ketiga-tiga fail ini

tsc ./main.ts ./app/app.component.ts ./app/app.module.ts

Fail js yang sepadan kini dijana, dan struktur direktori adalah seperti berikut:

Seterusnya pada index.html中require('./main') 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <my-app>ok...</my-app>
</body>
<script type="text/javascript">
  require('./main')
</script>
</html>

Mulakan atur cara elektron

Setakat ini program ini kelihatan normal dan memenuhi tujuan saya, tetapi apabila saya menukar kandungan dalam kotak input, masalah berlaku h1标签里面的{{name}}Ungkapan berikut tidak berubah dengan nilai dalam kotak input, iaitu pengikatan data tidak mempunyai. kesan.

Seterusnya...

Seterusnya, untuk meneroka punca masalah, saya membungkus tiga tsc生成的3个js文件使用webpack fail yang dijana sebelum ini

menggunakan webpack

webpack ./main.js main.out.js
index.html中的require语句换成require('./main.out')Akan

dan jalankan program semula

Sekarang ubah suai kandungan dalam input dan pengikatan data akan berkuat kuasa! ! !

Ada sesiapa tahu sebabnya? Jika anda tahu, sila beritahu saya, terima kasih banyak! ! ! 🎜
某草草某草草2755 hari yang lalu834

membalas semua(2)saya akan balas

  • 欧阳克

    欧阳克2017-06-14 10:55:29

    Jika anda ingin menukar import 'zone.js'改成import 'zone.js/dist/zone.js'
    dalam main.ts, anda harus tahu sebabnya dengan melihat package.json zone.js

    balas
    0
  • 阿神

    阿神2017-06-14 10:55:29

    Saya tidak begitu mahir dengan elektron, tetapi saya rasa masalah anda adalah mengenai import.

    Pertama sekali, prinsip kerja webpack adalah untuk membungkus semua js Sebagai contoh, bolehkah anda mencarinya dengan memetik node_modules里面的@angular/core, 那webpack知道会去node_modules里面去找到他并打包到指定的文件夹里面去(比如你的app文件夹里面),所以使用webpack后引用是正常的。 那问题就在这里了, electron对于非./开头的路径会去node_modules?

    balas
    0
  • Batalbalas