1

我正在尝试使用 Elm 构建一个 SPA 并创建三个页面，这些页面应该显示内容，这取决于 URL。

在此处输入图像描述

这三个页面的内容是相似的，例如Page.elm：

module Page.NotFound exposing (Msg(..), content)

import Html exposing (..)
import Html.Attributes exposing (..)



---- UPDATE ----


type Msg
    = NotFoundMsg


content : Html Msg
content =
    p [] [ text "Sorry can not find page." ]

在中Main.elm，我有以下代码：

module Main exposing (Model, Msg(..), init, main, update, view)

import API.Keycloak as Keycloak exposing (..)
import Browser
import Browser.Navigation as Nav
import Html exposing (..)
import Html.Attributes exposing (..)
import Json.Decode as Decode
import Page.Account as Account
import Page.Home as Home
import Page.NotFound as NotFound
import Route
import Url
import Url.Parser exposing ((</>), Parser, int, map, oneOf, parse, s, string)



---- MODEL ----


type alias Model =
    { key : Nav.Key
    , url : Url.Url
    , auth : Result String Keycloak.Struct
    }


init : Decode.Value -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
init flags url key =
    ( Model key url (Keycloak.validate flags), Cmd.none )



---- ROUTE ----


type Route
    = Account



---- UPDATE ----


type Msg
    = PageNotFound NotFound.Msg
    | PageAccount Account.Msg
    | PageHome Home.Msg
    | LinkClicked Browser.UrlRequest
    | UrlChanged Url.Url


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        LinkClicked urlRequest ->
            case urlRequest of
                Browser.Internal url ->
                    ( model, Nav.pushUrl model.key (Url.toString url) )

                Browser.External href ->
                    ( model, Nav.load href )

        UrlChanged url ->
            ( { model | url = url }
            , Cmd.none
            )



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions _ =
    Sub.none



---- VIEW ----


info : Html Msg
info =
    header [] [ text "Header" ]


createLink : String -> Html Msg
createLink path =
    a [ href ("/" ++ path) ] [ text path ]


navigation : Html Msg
navigation =
    ul []
        [ li [] [ createLink "home" ]
        , li [] [ createLink "account" ]
        ]


content : Model -> Html Msg
content model =
    main_ []
        [ case parse Route.parser model.url of
            Just path ->
                matchedRoute path

            Nothing ->
                NotFound.content
        ]


matchedRoute : Route.Route -> Html Msg
matchedRoute path =
    case path of
        Route.Home ->
            Home.content

        Route.Account ->
            Account.content


body : Model -> List (Html Msg)
body model =
    [ info
    , navigation
    , content model
    ]


view : Model -> Browser.Document Msg
view model =
    { title = "Cockpit"
    , body = body model
    }



---- PROGRAM ----


main : Program Decode.Value Model Msg
main =
    Browser.application
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        , onUrlChange = UrlChanged
        , onUrlRequest = LinkClicked
        }

编译器抱怨：

-- TYPE MISMATCH -------------- /home/developer/Desktop/elm/cockpit/src/Main.elm

The 2nd branch of this `case` does not match all the previous branches:

104|         [ case parse Route.parser model.url of
105|             Just path ->
106|                 matchedRoute path
107|
108|             Nothing ->
109|                 NotFound.content
                     ^^^^^^^^^^^^^^^^
This `content` value is a:

    Html NotFound.Msg

But all the previous branches result in:

    Html Msg

Hint: All branches in a `case` must produce the same type of values. This way,
no matter which branch we take, the result is always a consistent shape. Read
<https://elm-lang.org/0.19.0/union-types> to learn how to “mix” types.

-- TYPE MISMATCH -------------- /home/developer/Desktop/elm/cockpit/src/Main.elm

Something is off with the 2nd branch of this `case` expression:

120|             Account.content
                 ^^^^^^^^^^^^^^^
This `content` value is a:

    Html Account.Msg

But the type annotation on `matchedRoute` says it should be:

    Html Msg

-- TYPE MISMATCH -------------- /home/developer/Desktop/elm/cockpit/src/Main.elm

Something is off with the 1st branch of this `case` expression:

117|             Home.content
                 ^^^^^^^^^^^^
This `content` value is a:

    Html Home.Msg

But the type annotation on `matchedRoute` says it should be:

    Html Msg
Detected errors in 1 module.

我知道类型是错误的，但不知道如何证明。

我怎样才能让它工作？

我还查看了https://github.com/rtfeldman/elm-spa-example/blob/master/src/Main.elm中的示例，但不知道它是如何工作的。

4

2 回答 2

2

你有多种Msg类型，这没关系，但它可能会导致混乱。简而言之：Main.Msg与NotFound.Msg.

函数matchedRoute返回一个Html Main.Msgwhile 函数NotFound.content返回一个Html NotFound.Msg; 完全不同的类型。

您已经完成了 99% 的工作，因为您有一个PageNotFound NotFound.Msg类型构造函数，它生成一个Main.Msg. 这允许您将NotFound.Msg. Main.Msg这应该是PageNotFound NotFound.content在你的Nothing ->分支中做的事情。

于 2018-09-28T01:04:32.570 回答
1

问题是 is 所指的类型Msg，NotFound.contentis所指NotFound.Msg的Msg类型，这些并不会自动统一。因此，当您在表达式的不同分支中使用它们时，编译器会告诉您它们是不同的，不能统一为单一类型以供表达式返回。Main.matchedRouteMain.Msgcasecase

因此，您必须将一个转换为另一个，通常的方法是向Main.Msg包装“内部”味精类型（NotFound.Msg）的“外部”味精类型（）添加一个变体。幸运的是，您已经将该变体添加为PageNotFound NotFound.Msg，因此我们可以继续。

下一步是将 s 包装到NotFound.Msgs 中PageNotFound。不幸的是，我们很少能单独处理 的值NotFound.Msg，它通常被包裹在其他类型中，比如Htmlor Cmd，这更难处理。幸运的是，Evan 有足够的预知来预测这种情况并添加Cmd.map并Html.map供我们使用。就像List.mapand Maybe.map, Cmd.mapandHtml.map接受一个函数a -> b并使用它来分别将Html as 或Cmd as 转换为Html bs 或Cmd bs 。

所以，你真正需要做的就是使用Html.mapwith PageNotFoundon NotFound.content：

content : Model -> Html Msg
content model =
    main_ []
        [ case parse Route.parser model.url of
            Just path ->
                matchedRoute path

            Nothing ->
                NotFound.content |> Html.map PageNotFound
        ]

两个分支现在都将返回Main.Msg，编译器应该很高兴:)

顺便说一句，在 elm-spa-example 中，这是在这里完成的

于 2018-10-13T16:51:02.560 回答