angular cli 切换 css_使用Angular与TypeScript构建Electron应用(二)

最新推荐文章于 2020-12-19 22:50:12 发布

weixin_39855634

最新推荐文章于 2020-12-19 22:50:12 发布

阅读量62

点赞数

本文所有代码都可以在github找到。你可以通过commit历史来查看这些代码是如何一步一步构建的。如果有任何问题，也可以在github的issue上提出。

接前文，现在我们搭建好了一系列的环境，创建了一些初始的代码，是时候开始工作了。在这篇文章中我们主要负责创建登录界面与主界面，涉及篇幅关系我们不再使用远程服务端来交互，而是创建一些模拟的登录请求，当然，与服务端的交互方法可以在此系列文章后面几篇找到。OK，这里我们希望前端能够像QQ或微信一样，先展示一个登录界面，在登录成功后带领我们打开一个长时间停留的主界面，我们先理清需要做那几件事：

在Angular中创建路由，包括登录界面与主界面。
创建browser相关代码，给登录与跳转提供通信反馈。
在登录成功后我们关闭登录界面跳转至主界面。

Angular创建前端页面

由于我们安装了angular-cli，所以每次创建各类文件时都可以通过cli的方式来解决，这很方便，也降低了Angular的学习成本，如果对此不明白，可以看这里的文档。

1, 创建组件与路由

首先在src/app的路径下创建2个组件: login与main。好吧，你需要输入ng g component login来创建这个组件，但在之后我们就不再讨论这些细节，我只会告诉该怎么做一件事。

其次我们在src/app的路径下创建一个路由app.routing.ts，我们希望它可以做好两件事，根据URL进行页面的导航，在没有权限时对相应的导航进行保护。具体代码可以参照Angular的官方文档，但我猜你们懒得看，代码如下:

import {NgModule} from '@angular/core'
import {Routes, RouterModule} from '@angular/router'

import {LoginComponent} from './login/login.component'
import {MainComponent} from './main/main.component'

export const appRoutes: Routes = [
   {path: '', component: LoginComponent},
   {path: 'login', component: LoginComponent},
   {path: 'main', component: MainComponent}
]

@NgModule({
   imports: [RouterModule.forRoot(appRoutes)],
   exports: [RouterModule]
})
export class AppRoutingModule {
}

ok，这很简单，和我们熟悉的Angular1.x或react-route也没有太大区别。但是要让路由运行起来还要做两件事，第一是将路由在app.module.ts中注册，在module上挂载文件，Angular在编译时才会将文件引入进来，第二是在app.component.html中增加路由插座。

2, 创建样式与逻辑

现在，我们为前端页面添加一些样式与逻辑，这此的commit记录在这里，现在我们需要为登录界面添加逻辑与路由保护。

登录可以提交用户名与密码用作验证，这时候可以借助Angular的模板语法来快速的完成它们:

   <div class="input-box">
           <input type="text" #username>
   </div>
   <div class="input-box">
           <input type="text" #password>
   </div>
   <button (click)="login(username.value, password.value)">登录</button>

我们希望所有严格的逻辑或涉及数据库的问题都放在主进程解决，那么确认登录需要与electron主进程进行交互，以便于主进程来切换窗口。当然，在实际业务中你可以选择把服务器的交互放在Angular中来做，也可以在electron发起一个request。现在我们按下面几步来操作：

在login组件文件夹下创建login.service.ts，别忘了将服务添加到组件的providers依赖项中！
在src/index.html文件中添加
```
var electron = require('electron')
```
在src/app下添加shared文件夹，用来存放一些共用的组件与逻辑。在这里创建一个名为ipc-renderer的服务，并将它注册到app.component.ts中。具体代码如下：

import {Injectable} from '@angular/core
        declare let electron:any;
        @Injectable()
        export class IpcRendererService {
                constructor (){}
                
                private ipcRenderer = electron.ipcRenderer
                on (message: string, done){
                        return this.ipcRenderer.on(message, done);
                }
                send (message: string, ...args){
                        this.ipcRenderer.send(message, args);
                }
                api (action: string, ...args) {
                        this.ipcRenderer.send('api', action, ...args);
                        return new Promise((resolve, reject) => {
                                    this.ipcRenderer.once(`${action}reply`, (e, reply, status) =>{
                                            if (!reply){
                                                    return reject(status)
                                            }
                                            return resolve(reply)
                                    })
                            })
                }
                dialog (action: string, ...args) {
                        this.ipcRenderer.send('dialog', action, ...args);
                }
                sendSync (message: string, ...args){
                        return this.ipcRenderer.sendSync(message, arguments);
                }
        }

这里我们通过ipcRenderer与Electron交互，ipc-renderer就是Angular中用来通信的公共服务，这个服务模块理论上共享的，而且我们也只希望它被实例化一次，所以将它注入在app.component.ts中。这样每次子组件需要服务时不必在providers中标明它，而是直接在constructor中注入即可。

这很重要，特别是你想要在一个类中保存一些即时的数据信息，希望只存在一个实例用来共享时很有用。不过这里我们在使用一种投机取巧的方式，更严谨的约定放在后文再讨论。

可以看出来，api这个方法是我们增加的一个有意思的方法，这里我们可以作出一些参数上的约定，便于监听事件时做出更好的反馈。

3, 监听与反馈

这时，api的第一个参数被约定为action，用于描述这个API事件的用途，每一个API事件都会发起一次 apiName + reply 的事件用于回复。在Angular的公共服务中，我们不妨先把它转化为我们熟悉的Promise，再返回给每一个具体的组件服务，当然你也可以直接把它用作做fromEvent的Observable，但在这里，我们希望它看起来像是一个http服务，便于大家更好的理解它们工作的方式。

实际上，你可以选择一些成熟electron数据通信库或框架来解决这些复杂的问题，但在第一次请不要这样做，这就像上手使用Rails一样，虽然做的很快，但对你并没有多少益处。

这里有一些复杂，如果你希望对照当时的代码来学习，可以看这一次的commit。

ok，大家也可以想象的到，现在要做的是在electron中新建一个事件接收器，处理一些逻辑并且将它们返回，在根文件夹下新建browser/ipc/index.js并且填充基础的代码：